javascript - 我的脚本在 Microsoft Edge 中返回未定义的错误

Question

这是 JS 和 HTML 代码:

function dateChange(){
  var e = document.getElementById("trainingtype");
  var str = e.options[e.selectedIndex].value;
  var val = str;
  if (val == "1"){
    var x = document.getElementsByClassName("class1");
    for(i=0; i<x.length; i++) {
      x[i].style.display = "block";
    }
    var x = document.getElementsByClassName("class2");
    for(i=0; i<x.length; i++) {
      x[i].style.display = "none";
    }
    var x = document.getElementsByClassName("class3");
    for(i=0; i<x.length; i++) {
      x[i].style.display = "none";
    }
    document.getElementById("datepicker").value="Select Date and Place";
  } else {
    //another If else statement
  }
}

<select name="item_name" id="trainingtype" onChange="dateChange()">
  <option selected>Select training type</option>
  <option value="Bike">Bike Riding</option>
  <option value="Bucket">Bucket Washing</option>
  <option value="Shoe">Shoe Tying</option>	
</select>

<select name="datepicker" id="datepicker" onChange="amountChange(value)">
  <option>Select Date and Place</option>
  <option class="class1" value="1">1</option>
  <option class="class2" value="2">2</option>
  <option class="class3" value="3">3</option>
</select>

此代码在 Chrome、Safari 和 Firefox 中完美运行，但在 Microsoft Edge 中不起作用。在控制台中我收到错误:SCRIPT5009: 'value' is undefined

我该如何解决这个问题？

Answer 1

下面这行 JavaScript 没有调用您期望的元素:

var e = document.getElementById("trainingtype");

这是在调用 #trainingtype 元素，它是这样的:

<select name="item_name" id="trainingtype" onChange="dateChange()">
    <option selected>Select training type</option>
    <option value="Bike">Bike Riding</option>
    <option value="Bucket">Bucket Washing</option>
    <option value="Shoe">Shoe Tying</option>    
</select>

然后您继续测试值:

var str = e.options[e.selectedIndex].value;
var val = str;
if (val == "1") {

但是，1 与选项列表中的任何值都不相似。原来的选项列表已被替换，但它们不是数字。它们是单词/短语。

相反，您似乎打算调用 #datepicker(它的值类似于 1、2 和 3 )。否则，您可能无意中在第一个选项列表中使用了错误的值类型。