javascript onchange 运行本身

Question

我的 javascript 函数有问题。即使设置为运行 .onchange

，它也会在页面加载时自动运行

我有一个 select 看起来像这样：

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

当我刷新页面时，功能运行自动运行，我不知道为什么。谁能帮我这个？我希望函数运行 on select change.

Answer 1

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

Answer 2

您的代码是运行您的 getSelectedValue 函数，然后将设置 brand.onchange 设置为其 return 值。如果不需要参数，则只能以这种方式设置事件处理程序。

将参数传递给 dom 元素事件有两种选择：

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

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

或者您可以直接将活动添加到 html 元素：

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

Answer 3

这应该做...

<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() 函数。

javascript onchange 运行 本身

javascript onchange running by itself

html

javascript

javascript onchange 运行本身