[英]Javascript event 'onclick' not rendering result when the Javascript function is placed in HTML header section
我正在嘗試運行一個簡單的 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>
HTML是但onclick函數后javascript無法在div中呈現
[英]html is but javascript is not rendering in div after onclick function
Javascript function（使用 ajax）在 onclick 事件時不工作
[英]Javascript function (with ajax) is not working when onclick event
這個 onClick JavaScript 事件在 POST 部分不接受嗎？
[英]Is this onClick JavaScript event is not accepting in POST section?
在 HTML JavaScript Header 部分中運行 Google Script 函數
[英]Running Google Script Function in HTML JavaScript Header section
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.