使用 Javascript 编辑 HTML DOM
[英]Editing HTML DOM using Javascript
问题描述
My assignment is to modify the box provided by the instructor using Javascript.
我的任务是使用 Javascript 修改讲师提供的框。 However, none of the changes I make on my Javascript file seem to work.但是，我对 Javascript 文件所做的更改似乎都不起作用。 I have named my HTML file index.html and Javascript file javascript.js .我已将我的 HTML 文件index.html和 Javascript 文件命名为javascript.js . Here is what I have:这是我所拥有的：
document.getElementById("button1").addEventListener("click", function(){ document.getElementById("box").style.height = "250px"; }); document.getElementById("button2").addEventListener("click", function(){ document.getElementById("box").style.color:orange }); document.getElementById("button3").addEventListener("click", function(){ document.getElementById("box").style.opacity = 0; }); document.getElementById("button4").addEventListener("click", function(){ document.getElementById("box").style.height = "150px"
<.DOCTYPE html> <html> <head> <title>Jiggle Into JavaScript</title> <script type="text/javascript" src="javascript:js"> </script> </head> <body> <p>Press the buttons to change the box;</p> <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button> </body> </html>
3 个解决方案
解决方案1
3 2020-08-11 01:10:09
The problem is here: document.getElementById("box").style.color:orange .问题在这里： document.getElementById("box").style.color:orange 。 It should be document.getElementById("box").style.color = "orange";它应该是document.getElementById("box").style.color = "orange"; . .
document.getElementById("button1").addEventListener("click", function(){ document.getElementById("box").style.height = "250px"; }); document.getElementById("button2").addEventListener("click", function(){ document.getElementById("box").style.color = "orange"; }); document.getElementById("button3").addEventListener("click", function(){ document.getElementById("box").style.opacity = 0; }); document.getElementById("button4").addEventListener("click", function(){ document.getElementById("box").style.height = "150px" });
<.DOCTYPE html> <html> <head> <title>Jiggle Into JavaScript</title> <script type="text/javascript" src="javascript:js"> </script> </head> <body> <p>Press the buttons to change the box;</p> <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button> </body> </html>
解决方案2
0 2020-08-11 01:12:56
Well, when I run the code snippet, stacks "mini google inspect" shows that the ":" in your javascript should not be there!好吧，当我运行代码片段时，堆栈“mini google inspect”显示 javascript 中的“：”不应该存在！
So your code should be所以你的代码应该是
document.getElementById("button2").addEventListener("click", function(){
document.getElementById("box").style.color = "orange";
});
instead of what you currently have.而不是你目前拥有的。
解决方案3
0 2020-08-11 01:35:47
document.getElementById("button1").addEventListener("click", function(){ document.getElementById("box").style.height = "250px"; }); document.getElementById("button2").addEventListener("click", function(){ document.getElementById("box").style.background = "blue"; }); document.getElementById("button3").addEventListener("click", function(){ document.getElementById("box").style.opacity = 0; }); document.getElementById("button4").addEventListener("click", function(){ document.getElementById("box").style.height = "150px"; });
<body> <p>Press the buttons to change the box:</p> <div id="box" style="height;150px: width;150px: background-color;orange: margin;25px:opacity; 1;"></div> <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button> </body>
Check your syntax:)检查你的语法:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.