... и все же, как прогнать в цикле?
 

Доброе время суток. Совсем недавно взялся за изучение JS, и вчера имел честь написать свой первый скрипт. Все, чудесно, все работает, но длина: 100 строк. Можно ли укоротить этот кошмар шедевр путем использования цикла? Или иные варианты сделать код короче. Заранее спасибо!

// JavaScript Document
var imgArr = ["url('./img/pic_1.png')","url('./img/pic_2.png')","url('./img/pic_3.png')","url('./img/pic_4.png')"];
var background = "url('./img/podlojka.png')";
var background_empty = "url('./img/podlojka_empty.png')";

function Wallpaper() {
	var element1 = document.getElementById('price1');
	element1.onmouseover = ShowBackElement1;
	element1.onmouseout = HideBackElement1;
	var element2 = document.getElementById('price2');
	element2.onmouseover = ShowBackElement2;
	element2.onmouseout = HideBackElement2;
	var element3 = document.getElementById('price3');
	element3.onmouseover = ShowBackElement3;
	element3.onmouseout = HideBackElement3;
	var element4 = document.getElementById('price4');
	element4.onmouseover = ShowBackElement4;
	element4.onmouseout = HideBackElement4;
}

function ShowBackElement1() {
	var backgroung = document.getElementById('price1');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price1');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price1');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function HideBackElement1() {
	var backgroung = document.getElementById('price1');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price1');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price1');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement2() {
	var backgroung = document.getElementById('price2');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price2');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price2');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[1];
}
function HideBackElement2() {
	var backgroung = document.getElementById('price2');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price2');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price2');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement3() {
	var backgroung = document.getElementById('price3');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price3');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price3');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[2];
}
function HideBackElement3() {
	var backgroung = document.getElementById('price3');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price3');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price3');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement4() {
	var backgroung = document.getElementById('price4');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price4');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price4');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[3];
}
function HideBackElement4() {
	var backgroung = document.getElementById('price4');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price4');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price4');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}

В HTML:

<script type="text/javascript" src="js/wallpaper.js"></script>
<script type="text/javascript">
	window.onload = function() {
		Wallpaper();
	}
</script>

Используйте переменные и классы CSS)

Спасибо, за желание помочь. Если появится свободное время - опишите, пожалуйста, по-подробнее... Или пример какой...

вместо десятка одинаковых функций сделайте одну для начала:
вместо ShowBackElement1, ShowBackElement2, ...

function ShowBackElement(i) {
    var backgroung = document.getElementById('price' + i);
    backgroung.style.backgroundImage = background;
    
    var red = document.getElementById('under_price' + i);
    red.className = 'class2'; // '#430606';

    var yellow = document.getElementById('old_price' + i);
    yellow.className = 'class3'; // color = '#ffc601';

    var backImg = document.getElementById('wallpaper');
    backImg.style.backgroundImage = imgArr[i];
}

HideBackElement(i) по аналогии

function Wallpaper() {
    for (var i=1; i<5; i++) {
        var element1 = document.getElementById('price' + i);
        element1.onmouseover = function() {
            ShowBackElement(i);
        };
        element1.onmouseout = function() {
            HideBackElement(i);
        };
    }
}

но даже так - это отвратительно. но это нормально, вы ж учитесь

Во-первых, в функции Wallpaper необходимо абстрагироваться от коливества элементов. Например, так:

function Wallpaper() {
  for(var i = 0, l = arguments.length, element; i < l; i++){
    element = document.getElementById( arguments[ i ] );
    if( !element ) continue;
    element.onmouseover = ShowBackElement;
    element.onmouseout = HideBackElement;
  };
};

Wallpaper('price1', 'price2', 'price3', 'price4')

Во-вторых, сделай абстрактные функции ShowBackElement и HideBackElement.

Оу... Спасибо! :)

Печально, но всплыла другая проблема: при наведении на любой из первых трех элементов - JS расценивает как наведение на элемент 4. При наведении на 4 элемент не происходит ничего. Код:

// JavaScript Document
var imgArr = ["url('./img/pic_0.png')","url('./img/pic_1.png')","url('./img/pic_2.png')","url('./img/pic_3.png')","url('./img/pic_4.png')"];
var background = "url('./img/podlojka.png')";
var background_empty = "url('./img/podlojka_empty.png')";

function Wallpaper() {
	for (var i=1; i<4; i++) {
	  var element = document.getElementById('price'+i);
	  element.onmouseover = function() {
		  ShowBackElement(i);
	  }
	  element.onmouseout = function() {
		  HideBackElement(i);
	  }
	}
}

function ShowBackElement(i) {
	var backgr = document.getElementById('price'+i);
	backgr.style.backgroundImage = background;
	var red = document.getElementById('under_price'+i);
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price'+i);
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[i-1];
}
function HideBackElement(i) {
	var backgr = document.getElementById('price'+i);
	backgr.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price'+i);
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price'+i);
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}

Sweet, спасибо Вам огромное!

только замыкания тут не нужны, как и 2 разных функции show/hide.

:blink: буду рад, если поясните.

(function() {
  var imgArr = ['url(./img/pic_0.png)','url(./img/pic_1.png)','url(./img/pic_2.png)','url(./img/pic_3.png)','url(./img/pic_4.png)'];
  var background = ['url(./img/podlojka.png)','url(./img/podlojka_empty.png)']
  var red = ['#430606','#cd5d5d'];
  var yellow = ['#ffc601','#ff8d06'];
  var wallpaper=document.getElementById('wallpaper').style;
  function toggle(e) {
    var i=this.id.slice(-1);
    var type=+((e||window.event).type=='mouseover');
    this.style.backgroundImage = background[type];
    document.getElementById('under_price'+i).style.color = red[type];
    document.getElementById('old_price'+i).style.color = yellow[type];
    wallpaper.backgroundImage = imgArr[i-type];
  }
  for (var i=0;4>i++;) {
    var element = document.getElementById('price'+i);
    element.onmouseover = element.onmouseout = toggle;
  }
})()

Как-то так. Но на самом деле это делается через css классы.

Aetae, спасибо! Буду разбираться)