JS function doesn't change box color
Question
JS just refuses to do anything - doesn't show console.log, doesn't show any errors, doesn't do anything.
JS just doesn't give any signs of life really - I tried making document.getelementbyid(box1) and ("#box") and ("box") because of people on the internet use all these and it works.
Tried to make events embedded in HTML to call the function, tried to call the function on window.onload, etc.
Tried changing text and color and size and margins - nothing works. And there is sometimes a null error - meaning that JS can't get the style value for some reason.
var box = document.getElementById("#box1"); function changeColor() { var box = document.getElementById("#box1"); box.style.backgroundColor = 'red'; }
#box1 { height: 100px; width: 100px; background-color: #B9E257; } #box2 { height: 100px; width: 100px; background-color: #69ADE1; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="N.css" type="text/css"> </head> <body> <div id="box1">1</div> <div id="box2">2</div> <button onclick="changeColor()">Go!</button> <script src="N.js" type="text/javascript"></script> </body> </html>
Why on earth would it not work?
3 answers
solution1
2 ACCPTED 2019-05-12 18:31:22
The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
For more info visit the docs
The ID is case-sensitive string which is unique within the document;
Please check the running example below:
function changeColor() { var box = document.getElementById("box1"); console.log(box); box.style.backgroundColor = 'red'; }
#box1 { height: 100px; width: 100px; background-color: #B9E257; } #box2 { height: 100px; width: 100px; background-color: #69ADE1; }
<head> <link rel="stylesheet" href="N.css" type="text/css"> </head> <body> <div id="box1">1</div> <div id="box2">2</div> <button onclick="changeColor()">Go!</button> <script src="N.js" type="text/javascript"></script> </body>
solution2
0 2019-05-12 18:34:48
Your JS throwing error just because you are using # in document.getElementById which is not allowed. You need to define # for ID in jQuery not in JS.
Here is the updated code. Just only removed # from document.getElementById nothing else I have done in it.
function changeColor() { var box = document.getElementById("#box1"); box.style.backgroundColor = 'red'; }
#box1 { height: 100px; width: 100px; background-color: #B9E257; } #box2 { height: 100px; width: 100px; background-color: #69ADE1; }
<head> <link rel="stylesheet" href="N.css" type="text/css"> </head> <body> <div id="box1">1</div> <div id="box2">2</div> <button onclick="changeColor()">Go!</button> <script src="N.js" type="text/javascript"></script> </body>
solution3
0 2019-05-12 19:10:07
If you really like that #, then instead of var box = document.getElementById("#box1"); do
var box = document.querySelector("#box1");
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.