将 onchange 脚本内联到外部 JS

Question

我有一个表单选择器元素，它有一个跟随 onchange 的内联脚本：

<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>

这非常适合我的输出，将选项的背景颜色更改为与单词颜色相同的颜色，绿色为绿色，黄色为黄色等。

.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 类型更改为许多不同的东西。我只是不明白。

Answer 1

您需要为更改事件附加处理程序

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

Answer 2

您没有提供颜色元素的代码，所以我用您提供的代码进行了一些演示：

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 方法并从所选选项中获取值。

将 onchange 脚本内联到外部 JS

Inline onchange script to external JS

javascript

inline

external