Изменение массива функцией
Здравствуйте! Хотел сделать чтобы при нажатии кнопки менялся цвет объекта. Например 3 цвета и при нажатии на кнопку они меняются по кругу(одно нажатие - смена одного цвета, второе - следующий цвет и т.д.)
Долго дуплил, писал длинные коды, ничего не работало! В итоге понял, что проблема с функцией! <button onClick="nu()">Надпись</button>
<script>
var hy = ['1', '2', '3'];
function nu(huy) {
hut = hy.splice(0, 1);
alert(hy);
}
</script>
если вынести массив из функции, как на примере выше, то функция его не видит. Если объявить массив в самой функции, то при каждом нажатии массив обновляется и всегда отвечает "2,3". Как сделать чтобы получить данные из массива и внести изменения в массив??
function color2() {
var color = ['1', '2', '3'];
var cString = color.join();
var cStrigIf = cString.indexOf(i);
var colorId = document.getElementById("square");
var i = 1;
for (var i = 1;; i++) {
if (cStringIf(i) == true) {
color.splice(0, 1);
return i;
}
else {
continue;
}
}
color.splice(i-1, 0, i);
switch(i) {
case 1 :
colorId.style.backgroundColor = "white"
;
break;
case 2 :
colorId.style.backgroundColor = "gold"
;
break;
case 3 :
colorId.style.backgroundColor = "lime"
;
break;
}
if (i > 3) {
color.splice(0);
}
}
Вот, так я представлял "рабочий" код, но все оказалось сложно из-за моих плохих знаний языка. Но я только начинаю его учить и решил сделать такую программу, думая, что все просто! |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html> <head>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: red;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var colors = ['red', 'silver', 'yellow'];
var index = 0;
$('div').click(function()
{
index++;
if (index == colors.length)
index = 0;
$(this).css('background', colors[index]);
});
</script>
</body>
</html>
|
Спасибо! но тут на jquery, а его я тем более не знаю! Нужно порыться в гугле и разобрать код. Еще раз спасибо! А на чистом JS можно реализовать?
|
та какая разница с jquery, без него.. код сильно не изменится:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html> <head>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: red;" onclick="divClick(this);"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var colors = ['red', 'silver', 'yellow'];
var index = 0;
function divClick(ths)
{
index++;
if (index == colors.length)
index = 0;
ths.style.background = colors[index];
};
</script>
</body>
</html>
|
Гигантское спасибо! Просто меня $ всякие смущают! Хочу разобраться, а пока ток простой js учу!
СПАСИБО! |
как сделать управление кнопкой???
|
Ты хочешь радиоуправляемую кнопку?
|
именно!
я хочу чтобы цвет div менялся при нажатии на кнопку |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html><head></head>
<body>
<div style="width: 100px; height: 100px; background-color: red;" id="block"></div>
<input type="radio" name="color" onclick="divClick(0);" checked="checked"><br>
<input type="radio" name="color" onclick="divClick(1);"><br>
<input type="radio" name="color" onclick="divClick(2);"><br>
<script type="text/javascript">
var block = document.getElementById('block');
var colors = ['red', 'silver', 'yellow'];
var index = 0;
function divClick(ind)
{
block.style.background = colors[ind];
};
</script>
</body>
</html>
|
Спасибо, но нужна именно кнопка!
|
| Часовой пояс GMT +3, время: 14:45. |