изменение цвета кнопок

@Товарищ Саахов · Регистрация: 04.10.2011

Привет всем!
Помогите разобраться. У меня есть например 4 кнопки с определенным цветом:

HTML5

<input type="button"  id=b1 style="background: #fc0707;" value="Кнопка1">
<input type="button"  id=b2 style="background: #F6F6f6;" value="Кнопка2">
<input type="button"  id=b3 style="background: #F6F6f6;" value="Кнопка3">
<input type="button"  id=b4 style="background: #F6F6f6;" value="Кнопка4">

изначально одна из них отличается по цвету.
что хочу?
Хочу что бы при нажатии на кнопку 3 например, кнопка 1 становилась #F6F6f6, а кнопка 3 #fc0707.

как я это понимаю (но это не работает):

Javascript

1 2	document.getElementById('b2').style.backgroundColor.onclick = '#fc0707' document.getElementById('b1').style.backgroundColor = '#F6F6f6'

и все это засунуть в конструкцию if/elseif ?

возможно вопрос и "нубский", но я только учусь.

@Mysterious Light · 30.12.2012, 19:07

Если я правильно понял задачу, то так:

HTML5

<script>
function btnclick() {
    activebtn.style.backgroundColor = disactiveclr;
    (activebtn = this).style.backgroundColor = activeclr;
}
var disactiveclr = "#F6F6f6";
var activeclr = "#fc0707";
var activebtn = null;
function ld(){
    activebtn = document.getElementById("b1");
    for(var i=1; i<5; ++i) document.getElementById("b"+i).onclick=btnclick;
    alert("ready");
}
</script>
<body onload="ld();">
<input type="button"  id=b1 style="background: #fc0707;" value="Кнопка1">
<input type="button"  id=b2 style="background: #F6F6f6;" value="Кнопка2">
<input type="button"  id=b3 style="background: #F6F6f6;" value="Кнопка3">
<input type="button"  id=b4 style="background: #F6F6f6;" value="Кнопка4">
</body>

@Товарищ Саахов · 30.12.2012, 20:04 **[ТС]**

спасибо за ответ, но немного не так. у вас получается кнопка окрашивается в другой цвет, при нажатии на нее.
а хотелось бы так:
1. с самого начала одна из кнопок красная - первая
2. я нажимаю на нее она меняет свой цвет на серый, но красной становится кнопка 3
4. я нажимаю кнопку 3 она меняет свой цвет на серый, но красной становится кнопка 4
5. я нажимаю кнопку 4 она меняет свой цвет на серый, но красной становится кнопка 1

вот как то так.

Добавлено через 32 минуты
получается сценарий на 4 действия

@Mysterious Light · 30.12.2012, 20:34

То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так? Какая именно: случайно-выбранная или правая/левая? При нажатии на серую кнопку ничего не должно меняться?

@Товарищ Саахов · 30.12.2012, 20:53 **[ТС]**

Сообщение от Mysterious Light

То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так?

да именно.

Сообщение от Mysterious Light

Какая именно: случайно-выбранная или правая/левая?

скажем по сценарию в предыдущем моем посте. жмем 1 меняется 3
3->4
4->1

Сообщение от Mysterious Light

При нажатии на серую кнопку ничего не должно меняться?

нет цвета меняются должны только при нажатии на красную кнопку.

@Mysterious Light · 30.12.2012, 21:04

Тогда так:

Javascript

function nextBtn(btn) {
    var n = btn.id;
    n = n=="b1" ? "b3" : (n=="b3" ? "b4" : "b1");
    return document.getElementById(n);
}
function btnclick() {
    activebtn.style.backgroundColor = disactiveclr;
    activebtn.onclick = null;
    activebtn = nextBtn(activebtn);
    activebtn.style.backgroundColor = activeclr;
    activebtn.onclick = btnclick;
}
var disactiveclr = "#F6F6f6";
var activeclr = "#fc0707";
var activebtn = null;
function ld(){
    (activebtn = document.getElementById("b1")).onclick=btnclick;
}

@Товарищ Саахов · 30.12.2012, 21:48 **[ТС]**

да спасибо! все работает!

а тут еще такой нюанс, не могли бы вы рассказать как функция nextBtn работает?(что бы не просто код скопипастить)

@Mysterious Light · 30.12.2012, 22:13

Javascript

function nextBtn(btn) {
    // определяем id нажатой (активной) кнопки
    var n = btn.id;
    // определяем id следующей кнопки по правилу
    // b1 -> b3
    // b3 -> b4
    // остальное -> b1
    n = (n=="b1" ? "b3" : (n=="b3" ? "b4" : "b1"));
    // возвращаем новую активную кнопку
    return document.getElementById(n);
}

Можно так:

Javascript

function nextBtn(btn) {
    // определяем id нажатой (активной) кнопки
    var n;
    // определяем id следующей кнопки по правилу
    // b1 -> b3
    // b3 -> b4
    // остальное -> b1
    if(btn.id=="b1") n = "b3";
    else
        if(btn.id == "b3") n = "b4";
        else n = "b1";
    // возвращаем новую активную кнопку
    return document.getElementById(n);
}

@OrionIX · 02.01.2013, 12:06

Почти тоже самое было необходимо и мне. Если поможет, обсуждения в этой теме:
Выделить активный пункт меню

@Товарищ Саахов 0 / 0 / 0 Регистрация: 04.10.2011 Сообщений: 32
	30.12.2012, 20:04 [ТС]	3
	спасибо за ответ, но немного не так. у вас получается кнопка окрашивается в другой цвет, при нажатии на нее. а хотелось бы так: 1. с самого начала одна из кнопок красная - первая 2. я нажимаю на нее она меняет свой цвет на серый, но красной становится кнопка 3 4. я нажимаю кнопку 3 она меняет свой цвет на серый, но красной становится кнопка 4 5. я нажимаю кнопку 4 она меняет свой цвет на серый, но красной становится кнопка 1 вот как то так. Добавлено через 32 минуты получается сценарий на 4 действия 0

@Mysterious Light $Эксперт по математике/физике$ 4144 / 2048 / 422 Регистрация: 19.07.2009 Сообщений: 3,102 Записей в блоге: 23
	30.12.2012, 20:34	4
	То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так? Какая именно: случайно-выбранная или правая/левая? При нажатии на серую кнопку ничего не должно меняться? 0

@Товарищ Саахов 0 / 0 / 0 Регистрация: 04.10.2011 Сообщений: 32
	30.12.2012, 20:53 [ТС]	5
	Сообщение от Mysterious Light То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так? да именно. Сообщение от Mysterious Light Какая именно: случайно-выбранная или правая/левая? скажем по сценарию в предыдущем моем посте. жмем 1 меняется 3 3->4 4->1 Сообщение от Mysterious Light При нажатии на серую кнопку ничего не должно меняться? нет цвета меняются должны только при нажатии на красную кнопку. 0

@Товарищ Саахов 0 / 0 / 0 Регистрация: 04.10.2011 Сообщений: 32
	30.12.2012, 21:48 [ТС]	7
	да спасибо! все работает! а тут еще такой нюанс, не могли бы вы рассказать как функция nextBtn работает?(что бы не просто код скопипастить) 0

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	02.01.2013, 12:06	9
	Почти тоже самое было необходимо и мне. Если поможет, обсуждения в этой теме: Выделить активный пункт меню 0

Опции темы