javascript - onChange() 在服务器上不起作用，但在 jsfiddle 上工作正常？

Question

比较代码

jsfiddle

HTML

<select name="client_select" id="client_select">
<option value="Name not listed">Name not listed</option>
<option value="1">abc company</option>
</select>
<span id="client_add"><input type="text" name ="" value="field1"/></span>

Javascript

document.getElementById("client_select").onchange = 
function (e) {
if (this.value == 'Name not listed') {
    document.getElementById("client_add").style.display="";
    } else {
        document.getElementById("client_add").style.display="none";    
    }
};

至

我的网站

<script>
document.getElementById("client_select").onchange = 
function (e) {
    if (this.value == 'Name not listed') {
        document.getElementById("client_add").style.display="";
    } else {
document.getElementById("client_add").style.display="none";    
    }
};
</script>
<select name="client_select" id="client_select">
<option value="Name not listed">Name not listed</option>
    <option value="1">abc company</option>
</select>
<span id="client_add"><input type="text" name ="" value="field1"/></span>

解决方案:

在元素加载到客户端 DOM 后运行 javascript。

执行以下操作之一:

• 在 html 元素之后加载 javascript

• 使用 onLoad() 来包装脚本

• 使用 jQuery 使用 $( document ).ready(function() { }

Answer 1

当您尝试使用该元素时，该元素不可用，因为它尚未加载到 DOM 中。

将脚本移到元素后面

<select name="client_select" id="client_select">
    <option value="Name not listed">Name not listed</option>
    <option value="1">abc company</option>
</select>
<span id="client_add"><input type="text" name ="" value="field1"/></span>

<script>
    document.getElementById("client_select").onchange = function(e) {
        if (this.value == 'Name not listed') {
            document.getElementById("client_add").style.display = "";
        } else {
            document.getElementById("client_add").style.display = "none";
        }
    };
</script>

我还鼓励使用 addEventListener