How to switch JS code in HEAD HTML, that button respons the click
Question
I switched JS file in head, but button doesn`t response the event. The idea is when push the button background color must change.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pallete</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button class="paint" id="paint1">Paint bucket</button>
</body>
JS :
function f() {
document.getElementById("paint1").style.backgroundColor = "red";
}
let dec =document.getElementById('paint1');
dec.onclick = f;
Background-color must be changed
3 answers
solution1
1 2019-04-29 21:34:45
Since it is in the "head" section, when your Javascript code is executed, your HTML document is not fully loaded and element "paint1" does not exist yet.
window.onload = function() {
let dec = document.getElementById('paint1');
dec.onclick = f;
}
... will ensure your code will be executed when the page is completely loaded.
solution2
0 2019-04-29 21:52:44
look at this Alex:
function f() { if(document.getElementById("paint1").style.backgroundColor == "red"){ document.getElementById("paint1").style.backgroundColor = "";}else { document.getElementById("paint1").style.backgroundColor = "red"; } } let dec =document.getElementById('paint1'); dec.onclick = f;
.button { background-color: white; color: black; border: 2px solid #f44336; } .button:hover { background-color: #f44336; color: white; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pallete</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <button class="paint button" id="paint1">Paint bucket</button> </body>
solution3
0 2019-04-29 21:55:42
The really problem here is you define the script in a wrong position:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pallete</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button class="paint" id="paint1">Paint bucket</button>
<script>
function f() {
document.getElementById("paint1").style.backgroundColor = "red";
}
let dec =document.getElementById('paint1');
dec.onclick = f;
</script>
</body>
The script "<script>" tag, have to be executed after the element has been defined or created, if you want make your script works in a wrong position for example:
<html>
<button>Your Button</button>
</html>
<script>your script</script>
Then you have to use the onload event such like this exmaple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pallete</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button class="paint" id="paint1">Paint bucket</button>
</body>
<script>
window.onload = function() {
function f() {
document.getElementById("paint1").style.backgroundColor = "red";
}
let dec =document.getElementById('paint1');
dec.onclick = f;
}
</script>
To understand this see this structure:
html {
head {
}
body {
element {}
script {} > element
}
}
or
html {
head {
}
body {
}
element {}
script {} > element
}
In other words, if you add the element(in this circumstance button) inside the tag but outside of the tag , you have to define de in the same position after the element created, inside of tag, and outside of tag, but after the element who you will target the 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.