JavaScript onchange自行运行

javascript onchange running by itself

本文关键字：运行 onchange JavaScript      更新时间：2023-09-26

我对javascript函数有问题。当页面加载时，即使它设置为运行 .onchange ，它也会自行运行

我有一个看起来像这样的选择：

<select name="make_brand" id="make_brand" class="form_tag dispB width_full">
     <option value="" selected disabled>Please select</option>
     <option value="1">Audi</option>
     <option value="2">BMW</option>
     <option value="3">Mercedes-Benz</option>
</select>

我的js看起来像这样：

// defining select fields
var brand = document.getElementById("make_brand");
// get values
function getSelectedValue(element, show_mark){
     return element.options[element.selectedIndex].value;
}
// on select change
brand.onchange = getSelectedValue(brand, true);

当我刷新页面时，该功能会自动运行，我不知道为什么。谁能帮我解决这个问题？我希望函数在选择更改时运行。

您的代码正在运行您的getSelectedValue函数，然后将设置brand.onchange设置为它的返回值。只有在不需要参数的情况下，才能以这种方式设置事件处理程序。

有两个选项可用于将参数传递给 dom 元素事件：

你可以像这样创建一个匿名函数： 

brand.onchange = function(event){
    return getSelectedValue(event.target, true);
}

或者，您可以直接将事件添加到 html 元素中：

<select name="make_brand" onchange="getSelectedValue(this,true)" ...

这应该可以...

<html>
<head>
<script>
function init(){
var brand = document.getElementById("make_brand");
// on select change
brand.addEventListener("change", function(){getSelectedValue(brand, true)});
}
 // get values
function getSelectedValue(element, show_mark){
     return element.options[element.selectedIndex].value;
}
</script>
</head>
<body onLoad = "init()">
<select name="make_brand" id="make_brand" class="form_tag dispB width_full">
 <option value="" selected disabled>Please select</option>
 <option value="1">Audi</option>
 <option value="2">BMW</option>
 <option value="3">Mercedes-Benz</option>
</select>
</body>
</html>

在向文档中的元素添加侦听器之前，必须让文档加载。注意 body 标签，我在 onLoad 中调用了我的 init（） 函数。

brand.onchange 应该是这样的函数： brand.onchange = function(event){ getSelectedValue(brand, true); }

相关文章：