Question

我试图找出在HTML下拉菜单中选择某个选项时调用Javascript函数的正确语法。

这是我菜单的HTML细分：

<select id="change_chart" onChange="drawStuff()">
    <option value="1" selected>livejournal</option>
    <option value="2">librarybooks</option>
    <option value="3">sunspots</option>
</select>

这是我的Javascript：

function drawStuff() {

    var menu = document.getElementById("change_chart");

    var selected = menu.addEventListener("change", generateData);

    function generateData(event){
            if (menu.value == '1') {
                //do something
            }
            else if (menu.value == '2') {
                //do something
            }
            else if (menu.value == '3') {
                //do something
            }
        };
};

我是事件驱动编程的新手，所以我不知道这是否正确。有人有什么想法吗？

Answer 1

您当前的代码无法正常运行，因为内联onChange="drawStuff()"正在定义一个调用该函数的事件处理程序。到现在为止还挺好。但是drawStuff()本身定义了第二个事件处理程序，并将其与addEventListener()相关联，因此generateData()部分将不会运行，直到该元素上的第二个更改事件为止。（然后在第三个更改事件中它会附加另一个处理程序等）你想要一个方法或另一个方法，而不是两个：

var menu = document.getElementById("change_chart");
menu.addEventListener("change", generateData);

function generateData(event) {
  if (menu.value == '1') {
    alert(1);
  } else if (menu.value == '2') {
    alert(2);
  } else if (menu.value == '3') {
    alert(3);
  }
}

<select id="change_chart">
    <option value="1" selected>livejournal</option>
    <option value="2">librarybooks</option>
    <option value="3">sunspots</option>
</select>

如果您按上面所示执行此操作，则JavaScript需要包含在<script>元素中 <select>元素之后，并且/或者包含在DOMContentReady处理程序上的window.onload。

如果你想在你的HTML中使用内联onChange处理程序，它应该是什么样子 - 注意它将this作为参数传递给函数，然后在作为参考的函数内元素：

function drawStuff(menu) {
  if (menu.value == '1') {
    //do something
    alert(1)
  } else if (menu.value == '2') {
    //do something
    alert(2)
  } else if (menu.value == '3') {
    //do something
    alert(3)
  }
}

<select id="change_chart" onchange="drawStuff(this)">
    <option value="1" selected>livejournal</option>
    <option value="2">librarybooks</option>
    <option value="3">sunspots</option>
</select>

P.S。第一种方式，addEventListener()，通常是目前最好的方法。

HTML / JavaScript：使用下拉选项调用函数？

1 个答案: