Изменить цвет опции при выборе - JavaScript - PullRequest
Новая
       35

Изменить цвет опции при выборе - JavaScript

0 голосов
/ 18 ноября 2018

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

<select onchange="changeColor();" class="color" id="rgb">
  <option id="red" value="Red">Red</option>
  <option id="green" value="Green">Green</option>
  <option id="blue" value="Blue">Blue</option>
</select>

Я начал с функции ниже, но я не уверен, где я ошибся. 

function changeColor() {
    var red = document.getElementById('red');
    var green = document.getElementById('green');
    var blue = document.getElementById('blue');

    if(event.target.value == red) {
      red.style.color = "red";
    } else if(event.target.value == green) {
      green.style.color = "green";
    } else if(event.target.value == blue) {
      blue.style.color = "blue";
    } else  {
      alert("There was an error!");
      }
  };

Ответы [ 3 ]

0 голосов
/ 18 ноября 2018

Попробуй это. При выборе опции вы получите элемент <select> в colorParam. Если вы выберете первый вариант, вы получите Red в colorParam.value, но вы используете идентификаторы в lowerCase, так что вы можете использовать функцию toLowerCase() для его преобразования. Затем выберите элемент option и примените стили. 

function changeColor(colorParam) {
    let color = colorParam.value.toLowerCase();
    var optionElement = document.getElementById(color);
    optionElement.style.color = color;
};
<select onchange="changeColor(this);" class="color" id="rgb">
  <option id="red" value="Red">Red</option>
  <option id="green" value="Green">Green</option>
  <option id="blue" value="Blue">Blue</option>
  <option id="white" value="White">White</option>
  <option id="pink" value="Pink">Pink</option>
</select>
0 голосов
/ 18 ноября 2018

Я не уверен, что вы можете стилизовать элемент <option>. Вы можете стилизовать элемент <select>. Однако color не похоже на свойство, которое вы можете изменить, background-color - это.

Если это все, что вам нужно, вы можете встроить код javascript в атрибут обработчика onchange. Вам необходимо установить значения элементов <option> в правильные цвета CSS. 

<select onchange="this.style.backgroundColor=this.value">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
0 голосов
/ 18 ноября 2018

Похоже, вы не добавили параметр 'event' в вашу функцию. Попробуйте это: 

function changeColor(event) {
  var red = document.getElementById(red);
  var green = document.getElementById(green);
  var blue = document.getElementById(blue);

  if (event.target.value == red) {
    red.style.color = "red";
  } else if (event.target.value == green) {
    green.style.color = "green";
  } else if (event.target.value == blue) {
    blue.style.color = "blue";
  } else {
    alert("There was an error!");
  }};
...