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

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

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
2
3
4
5
6
7
8
9
10
11
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

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

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

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

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

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

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