Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/9: Рейтинг темы: голосов - 9, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 29.04.2019
Сообщений: 20

Смена цвета div при onchange

29.04.2019, 12:32. Показов 1894. Ответов 4
Метки нет (Все метки)

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

Помогите пожалуйста, нужно чтобы по выбору из dropdown менялся цвет квадрата, но почему-то не срабатывает:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<select id="slt" onchange="change_color()">
            <option value="green" selected="selected" id="none">please select</option>
            <option value="red">red</option>
            <option value="blue">blue</option>
            <option value="yellow">yellow</option>
  </select>
 
<div id="box">
</div>
 
<style>
 #box {
    width: 300px;
    height:300px;
    border: 2px solid;
    margin: 40px auto;
 
  }
</style>
JavaScript
1
2
3
4
5
6
7
8
9
10
  <script type="text/javascript">
var slt = document.getElementByID('slt');
var box = document.getElementByID('box');
 
function change_color() {
    box.style.background = slt.value;
}
 
 
</script>
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
29.04.2019, 12:32
Ответы с готовыми решениями:

Смена цвета блока при клике
При клике на кнопку, в определённом блоке должен меняться и текст внутри блока на заданный в условии, и так же, должен меняться цвет самого...

Смена цвета div
Здравствуйте. Есть, допутсим три, дива. Нужно написать функцию которая будет менять их цвет через каждый интервалы времени. Эти интервалы,...

Смена 4-х div классов при нажатии
Здравствуйте. Есть 4 DIV класса, один с них видимый, как при нажатии на ссылку скрывать 1 div class и открывать 2 div class? И так до...

4
Эксперт Java
3639 / 2971 / 918
Регистрация: 05.07.2013
Сообщений: 14,220
29.04.2019, 12:46
1. java != javascript
2. document.getElementByID должно быть document.getElementById
3. вместо
Цитата Сообщение от Ore6eg Посмотреть сообщение
onchange="change_color()"
сделай
slt.onchange = change_color

Добавлено через 31 секунду
ну и да, ошибки в консоли читай
0
0 / 0 / 0
Регистрация: 29.04.2019
Сообщений: 20
29.04.2019, 16:01  [ТС]
Поправьте пожалуйста код,

Пишу, но ничего не срабатывает:


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<select id="slt" slt.onchange = "change_color;">
            <option value="green" selected="selected" id="none">please select</option>
            <option value="red">red</option>
            <option value="blue">blue</option>
            <option value="yellow">yellow</option>
</select>
 
 
 
<div id="box">
</div>
 
 
 
<style>
 #box {
    width: 300px;
    height:300px;
    border: 2px solid;
    margin: 40px auto;
 
  }
</style>

JavaScript
1
2
3
4
5
6
var slt = document.getElementById('slt');
var box = document.getElementById('box');
 
function change_color() {
    box.style.background = slt.value;
}
0
Эксперт Java
3639 / 2971 / 918
Регистрация: 05.07.2013
Сообщений: 14,220
29.04.2019, 16:30
Лучший ответ Сообщение было отмечено Ore6eg как решение

Решение

Цитата Сообщение от Ore6eg Посмотреть сообщение
var box = document.getElementById('box');
после этого вставь
slt.onchange = change_color;
Цитата Сообщение от Ore6eg Посмотреть сообщение
<select id="slt" slt.onchange = "change_color;">
отсюда убери
1
0 / 0 / 0
Регистрация: 29.04.2019
Сообщений: 20
29.04.2019, 16:49  [ТС]
Благодарю за оперативную помощь!

Таким образом рабочий код по-итогу выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<select id="slt">
            <option value="" selected="selected" id="none">please select</option>
            <option value="red">red</option>
            <option value="blue">blue</option>
            <option value="yellow">yellow</option>
</select>
 
 
 
<div id="box">
</div>
CSS
1
2
3
4
5
6
7
#box {
    width: 300px;
    height:300px;
    border: 2px solid;
    margin: 40px auto;
 
  }
JavaScript
1
2
3
4
5
6
7
var slt = document.getElementById('slt');
var box = document.getElementById('box');
slt.onchange = change_color;
 
function change_color() {
    box.style.background = slt.value;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
29.04.2019, 16:49
Помогаю со студенческими работами здесь

Смена фона при клике на DIV
Возникла проблема с реализацией смена фона при клике на DIV. Точнее на странице пять div`ов, и нужно, сделать так, если я кликаю на...

Смена цвета кнопок при нажатии
Здравствуйте, У меня есть список в котором несколько кнопок. Мне нужно чтобы при нажатии на кнопку менялся задний фон но при нажатии на...

Смена цвета у ссылки при прокрутке
Всем привет. Пытаюсь сейчас сделать одну небольшую страничку, и никак не могу решить проблему с ссылкой. При нажатии на ссылку,...

Смена класса div при нажатии на ссылку
Здравствуйте. Есть код &lt;div id=&quot;readmore_block&quot; class=&quot;stocke&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;readmore_btn&quot;&gt;&lt;/a&gt;&lt;/div&gt; Как сделать что бы при...

Смена цвета изображения при смене параметров
Здравствуйте. Хочу обратиться с проблемой. Дана интерактивная карта некой области, показывающая плотность населения по районам, нужно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Установка 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/
Программная установка даты и запрет ее изменения
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru