当 Javascript 函数放置在 HTML 标题部分时，Javascript 事件“onclick”不呈现结果
[英]Javascript event 'onclick' not rendering result when the Javascript function is placed in HTML header section
问题描述
I am trying to run a simple Javascript code which changes the background color of the element on button click.
我正在尝试运行一个简单的 Javascript 代码，它会在单击按钮时更改元素的背景颜色。 Below is the code but it doesn't work.下面是代码，但它不起作用。 Please help.请帮忙。
<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>
Whereas the below code works but I do not want to use the events in HTML attributes.而下面的代码有效，但我不想在 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>
5 个解决方案
解决方案1
1 2017-12-28 06:09:21
Below is the code but it doesn't work.
Because you haven't invoked this method.因为你还没有调用这个方法。
You need to invoke it on DOMContentLoaded event once the DOM is loaded.加载 DOM 后，您需要在DOMContentLoaded事件上调用它。
document.addEventListener( "DOMContentLoaded", checkRun );
Just place this code in the same script tag.只需将此代码放在同一个脚本标记中即可。
Demo演示
<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>
解决方案2
0 2017-12-28 06:11:26
You need to call the method so that it works in your script write this line您需要调用该方法以使其在您的脚本中工作 写这一行
checkRun();
look at the example below看下面的例子
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>
解决方案3
0 2017-12-28 06:12:42
You need to invoke your checkRun() function.您需要调用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>
解决方案4
0 2017-12-28 06:15:26
just put it inside window onload function and remove checkrun function.只需将其放在窗口 onload 函数中并删除 checkrun 函数即可。 it will work它会工作
<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>
解决方案5
0 2017-12-28 06:20:41
you need to invoke checkRun method when document is ready您需要在文档准备好后调用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>
if you are using Jquery you can also do如果您使用的是Jquery您也可以这样做
<script type='text/javascript'>
$(document).ready(function () {
checkRun();
function checkRun() {
var btn = document.querySelector('button');
btn.style.backgroundColor = 'red';
}
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.