Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Замена цвета при нажатии кнопки (https://javascript.ru/forum/dom-window/72109-zamena-cveta-pri-nazhatii-knopki.html)

rasta 09.01.2018 16:24

Замена цвета при нажатии кнопки
 
Добрый день!
Извините за беспокойство, может кто-нибудь поможет, только начал изучение javascript.
Задача: чтобы из выпадающего списка выбирался цвет, потом нажималась кнопка и чёрный квадрат становился красным или зелёным (в зависимости от выбранного цвета).

Написал такой код, но не работает(((
<html>
<head>
  <title>DOM интерфейс</title>
    <style>
    #pict {
      width: 100px;
      height: 100px;
      background-color: black;
    }
  </style>
</head>
<body>

  <select id="selcolor">
    <option value="Maroon">Красный</option>
    <option value="Green">Зеленый</option>
</select>
  <button onclick="ifelsefunction()">Кнопка</button>

  <div id="pict"></div>
  <script>
   function ifelsefunction() { 
var seltheme = document.getElementById("selcolor").value;
     var elem = document.getElementById("pict");
     if(seltheme == "Maroon") {
    elem.style.backgroundColor = 'red'; 
     }
     else  if(seltheme == "Green") {
    elem.style.backgroundColor = 'green'; 
     }
  </script>
</body>
</html>

Царь Леонид 09.01.2018 16:30

В конце скрипта } надо поставить

rasta 09.01.2018 16:33

Цитата:

Сообщение от Царь Леонид (Сообщение 474574)
В конце скрипта } надо поставить

Спасибо! Целый день мучился :)

Dilettante_Pro 09.01.2018 17:01

rasta,
А if-else специально вставлены? А то ведь можно и без них

<html>
<head>
  <title>DOM интерфейс</title>
    <style>
    #pict {
      width: 100px;
      height: 100px;
      background-color: black;
    }
  </style>
</head>
<body>

  <select id="selcolor">
    <option value="Red">Красный</option>
    <option value="Green">Зеленый</option>
</select>
  <button onclick="ifelsefunction()">Кнопка</button>

  <div id="pict"></div>
  <script>
   function ifelsefunction() { 
var seltheme = document.getElementById("selcolor").value;
     var elem = document.getElementById("pict");

    elem.style.backgroundColor = seltheme; 

     }
  </script>
</body>
</html>


Часовой пояс GMT +3, время: 16:49.