Question

您好我仍处于javascript编码的基础知识中，但在课堂上我被要求将四个按钮设置为四个不同的javascript命令，我有三个工作但不是最后一个，我做错了什么。我相信还有其他方法可以让它重置，但我希望通过document.getElementById来实现这一目的。

另外，如果有可能，还有一种方法可以使高度增长按钮继续扩展一次吗？非常感谢任何帮助！

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
<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>

<script type="text/javascript" src="javascript.js"></script>
</body>
</html>

document.getElementById("button1").addEventListener("click", function(){
    document.getElementById("box").style.height = "250px";
});       

document.getElementById("button2").addEventListener("click", function(){
    document.getElementById("box").style.backgroundColor = "blue";
});     

document.getElementById("button3").addEventListener("click", function(){
    document.getElementById("box").style.opacity = 0.2;
});   

document.getElementById("button4").addEventListener("click", function(){
    document.getElementById("box").reset = "";
});

Answer 1

身高的增量增加：

var height = box.offsetHeight;
var growth = height + 250;
box.style.height = growth + 'px';

重置页面：

box.reset = location.reload();

我还使用了box

的var

var box = document.getElementById('box);

段

var box = document.getElementById("box");


document.getElementById("button1").addEventListener("click", function() {
    var height = box.offsetHeight;
    var growth = height + 250;
    box.style.height = growth + 'px';

});
document.getElementById("button2").addEventListener("click", function() {

  box.style.backgroundColor = "blue";
});
document.getElementById("button3").addEventListener("click", function() {

  box.style.opacity = 0.2;
});
document.getElementById("button4").addEventListener("click", function() {

  box.reset = location.reload();
});

<!DOCTYPE html>
<html>

<head>
  <title>Jiggle Into JavaScript</title>
</head>

<body>
  <form>
    <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" type='reset'>Reset</button>

  </form>
</body>

</html>

可更改图像document.getElementById上的重置按钮

1 个答案:

段