Javascript event 'onclick' not rendering result when the Javascript function is placed in HTML header section
Question
I am trying to run a simple Javascript code which changes the background color of the element on button click. 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>
<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 answers
solution1
1 2017-12-28 06:09:21
Below is the code but it doesn't work. Please help.
Because you haven't invoked this method.
You need to invoke it on DOMContentLoaded event once the DOM is loaded.
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>
solution2
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>
solution3
0 2017-12-28 06:12:42
You need to invoke your checkRun() function.
<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>
solution4
0 2017-12-28 06:15:26
just put it inside window onload function and remove checkrun function. 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>
solution5
0 2017-12-28 06:20:41
you need to invoke checkRun method when document is ready
<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
<script type='text/javascript'>
$(document).ready(function () {
checkRun();
function checkRun() {
var btn = document.querySelector('button');
btn.style.backgroundColor = 'red';
}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.