当javascript函数放在HTML标题部分时，Javascript事件'onclick'不会呈现结果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当javascript函数放在HTML标题部分时，Javascript事件'onclick'不会呈现结果相关的知识，希望对你有一定的参考价值。
我正在尝试运行一个简单的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>
答案
下面是代码，但它不起作用。请帮忙。
因为您尚未调用此方法。
一旦加载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>另一答案
您需要调用该方法，以便它在您的脚本中工作，编写此行
checkRun();
看下面的例子
function checkRun(){
var btn = document.querySelector('button');
btn.onclick = function() {
btn.style.backgroundColor='red';
}
}
checkRun()<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>另一答案
你需要调用你的checkRun()函数。
<html>
<head>
<title>check</title>
<script type='text/javascript'>
function checkRun(){
var btn = document.querySelector('button');
btn.onclick = function() {
btn.style.backgroundColor='red';
}
}
window.onload= 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>另一答案
只需将其置于窗口onload函数中并删除checkrun函数。它会工作
<html>
<head>
<title>check</title>
<script type='text/javascript'>
window.onload = function(){
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>另一答案
文档准备好后，您需要调用checkRun方法
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function (event) {
console.log("DOM fully loaded and parsed");
checkRun();
});
function checkRun() {
var btn = document.querySelector('button');
btn.style.backgroundColor = 'red';
}
</script>
如果你使用Jquery你也可以
<script type='text/javascript'>
$(document).ready(function () {
checkRun();
function checkRun() {
var btn = document.querySelector('button');
btn.style.backgroundColor = 'red';
}
});
</script>
以上是关于当javascript函数放在HTML标题部分时，Javascript事件'onclick'不会呈现结果的主要内容，如果未能解决你的问题，请参考以下文章