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

@Товарищ Саахов · Регистрация: 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

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

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Товарищ Саахов 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,204 Записей в блоге: 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