我正在尝试运行一个简单的Javascript代码，该代码可以在单击按钮时更改元素的背景颜色。下面是代码，但它不起作用。请帮忙。
<html>
<head>
<title>check</title>
<script type='text/javascript'>
function checkRun(){
var btn = document.querySelector('button');
btn.onclick = function() {
btn.style.backgroundColor='red';
}
}
</script>
</head>
<body>
<input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
<button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>
</body>
</html>
虽然下面的代码可以工作，但我不想在 HTML 属性中使用事件。
<html>
<head>
<title>check</title>
<script type='text/javascript'>
function checkRun(){
var btn = document.querySelector('button');
btn.style.backgroundColor='red';
}
</script>
</head>
<body>
<input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
<button type='button' name='checkName' id='check3' value='val3' class='class3' onclick='checkRun()'>Hello</button>
</body>
</html>
最佳答案
Below is the code but it doesn't work. Please help.
因为您还没有调用这个方法。
加载 DOM 后，您需要在 DOMContentLoaded 事件上调用它。
document.addEventListener( "DOMContentLoaded", checkRun );
只需将此代码放在同一个脚本标记中即可。
演示
<html>
<head>
<title>check</title>
<script type='text/javascript'>
function checkRun() {
var btn = document.querySelector('button');
btn.onclick = function() {
btn.style.backgroundColor = 'red';
}
}
document.addEventListener("DOMContentLoaded", checkRun);
</script>
</head>
<body>
<input type='text' name='checkName' id='check1' value='val1' class='class1' /><br><br>
<button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>
</body>
</html>关于当 Javascript 函数放置在 HTML header 部分时，Javascript 事件 'onclick' 不呈现结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48002377/