Встроенный сценарий обмена на внешний JS - PullRequest
Новая
       12

Встроенный сценарий обмена на внешний JS

0 голосов
/ 07 февраля 2020

У меня есть элемент селектора формы, который имеет встроенный скрипт после замены: 

<select onchange="this.className=this.options[this.selectedIndex].className">
     <option value="select">Select color</option>
     <option class="greenOpt" value="green" >Green</option>
    <option class="yellowOpt"   value="yellow" >Yellow</option>
    <option class="blueOpt" value="blue" >Blue</option>
</select>

Это отлично работает для моих выходных данных, меняя цвет фона опций на цвет их слова, зеленый зеленый, желтый - желтый, и т. д. c. 

.greenOpt{
background-color: green;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.blueOpt{
  background-color: blue;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }

.yellowOpt{
  background-color: yellow;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

Но я хочу переместить этот скрипт onchange во внешнюю функцию, и я не уверен, как это должно выглядеть. Я понимаю, что мне нужно сделать в теге <select>, это onchange="colorSel()"

Моя функция на данный момент: 

function colorSel() {
  var colors = document.getElementById("colors");
  colors = this.className = this.options[this.selectedIndex].className;
  }

Я в тупике. Я изменил параметр функции и тип getElement для множества разных вещей. Я просто не понимаю.

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Вы не предоставили код для элемента colors, поэтому я продемонстрировал кое-что из того, что вы дали: 

change = function(selectObject) {
   selectObject.className= selectObject.options[selectObject.selectedIndex].className
}
.greenSel{
  background-color: green;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.blueSel{
  background-color: blue;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }

.yellowSel{
  background-color: yellow;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
<select onchange="change(this)">
    <option value="select">Select color</option>
    <option class="greenSel" value="green" >Green</option>
    <option class="yellowSel"   value="yellow" >Yellow</option>
    <option class="blueSel" value="blue" >Blue</option>
</select>

Вы пропустили передачу этого метода onchange и получения значения из выбранного варианта.

0 голосов
/ 07 февраля 2020

Вам необходимо прикрепить обработчик для события изменения

document.getElementById("colors").addEventListener('change', function (){ //Your logic goes here });

...