[英]Javascript position of onchange assignment
我有一个复选框和一个文本输入。 我希望仅在选中复选框时才启用文本输入。 我在这里找到了此问题的答案，但是以下代码无效：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>
但是，我注意到，如果我将<script>环境移动到<input>框下方，则该代码将起作用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</body>
</html>
为什么<script>环境的位置对onchange属性起作用？
这是因为页面是从顶部开始解析的，每个元素在解析后都会立即添加。
解析了script标签后，代码将立即运行。 当时尚未解析input标签，因此input元素尚不存在。
通过将script标签放置在input标签下方，脚本将在创建input元素之后运行。
您可以使用onload事件来确保代码在页面完全解析之后运行，而不必重新排列代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>
Firefox上的Javascript在onchange分配上意外停止执行
[英]Javascript on Firefox stops execution unexpectedly on an onchange assignment
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.