JS功能不会改变盒子的颜色
[英]JS function doesn't change box color
问题描述
JS just refuses to do anything - doesn't show console.log, doesn't show any errors, doesn't do anything. 
JS只是拒绝执行任何操作-不显示console.log，不显示任何错误，不执行任何操作。
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. JS真的没有任何生命迹象-我尝试制作document.getelementbyid(box1)和（“ #box”）和（“ box”）是因为互联网上的人们都在使用所有这些，并且它可以工作。
Tried to make events embedded in HTML to call the function, tried to call the function on window.onload, etc. 试图使事件嵌入HTML中以调用该函数，并尝试在window.onload等上调用该函数。
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. 有时会出现null错误-表示JS由于某种原因无法获取样式值。
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 个解决方案
解决方案1
2 已采纳 2019-05-12 18:31:22
The Document method getElementById() returns an Element object representing the element whose id property matches the specified string.
For more info visit the docs 有关更多信息，请访问文档
The ID is case-sensitive string which is unique within the document; ID是区分大小写的字符串，在文档中是唯一的。
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>
解决方案2
0 2019-05-12 18:34:48
Your JS throwing error just because you are using # in document.getElementById which is not allowed. 您的JS抛出错误仅仅是因为您在document.getElementById中使用# ，这是不允许的。 You need to define # for ID in jQuery not in JS. 您需要在jQuery中而不是JS中为ID定义# 。
Here is the updated code. 这是更新的代码。 Just only removed # from document.getElementById nothing else I have done in it. 只是从document.getElementById删除了# ，我没有做其他任何事情。
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>
解决方案3
0 2019-05-12 19:10:07
If you really like that #, then instead of var box = document.getElementById("#box1"); 如果您真的喜欢那个＃，那么请使用var box = document.getElementById（“＃box1”）; do 做
var box = document.querySelector("#box1");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.