使用Javascript编辑HTMLDOM

我的任务是使用Javascript修改讲师提供的框。然而，我对Javascript文件所做的任何更改似乎都不起作用。我将我的HTML文件命名为

index.HTML

和Javascript文件

Javascript.js

。以下是我所拥有的：

document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.height=“250px”；
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“框”）.style.颜色：橙色
});
document.getElementById（“button3”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.opacity=0；
});
document.getElementById（“button4”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.height=“150px”

跳转到JavaScript
按下按钮以更改框

成长
蓝色
褪色
重置

问题在这里：

document.getElementById（“box”）.style.color:orange

。它应该是

document.getElementById（“box”）.style.color=“orange”

document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.height=“250px”；
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.color=“橙色”；
});
document.getElementById（“button3”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.opacity=0；
});
document.getElementById（“button4”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.height=“150px”
})；

跳转到JavaScript
按下按钮以更改框

成长
蓝色
褪色
重置

问题在这里：

document.getElementById（“box”）.style.color:orange

。它应该是

document.getElementById（“box”）.style.color=“orange”

document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.height=“250px”；
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.color=“橙色”；
});
document.getElementById（“button3”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.opacity=0；
});
document.getElementById（“button4”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.height=“150px”
})；

跳转到JavaScript
按下按钮以更改框

成长
蓝色
褪色
重置

好吧，当我运行代码片段时，堆栈“mini google inspect”显示javascript中的“：”不应该存在

所以你的代码应该是

document.getElementById("button2").addEventListener("click", function(){
    document.getElementById("box").style.color = "orange";

        });

---

而不是您当前拥有的。

好吧，当我运行代码片段时，堆栈“mini google inspect”显示javascript中不应该有“：”

所以你的代码应该是

document.getElementById("button2").addEventListener("click", function(){
    document.getElementById("box").style.color = "orange";

        });

而不是你现在拥有的。

document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.height=“250px”；
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.background=“蓝色”；
});
document.getElementById（“button3”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.opacity=0；
});
document.getElementById（“button4”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.height=“150px”；
})；

按下按钮以更改框

成长
蓝色
褪色
重置

document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.height=“250px”；
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.background=“蓝色”；
});
document.getElementById（“button3”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.opacity=0；
});
document.getElementById（“button4”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.height=“150px”；
})；

按下按钮以更改框

成长
蓝色
褪色
重置

你是如何恢复正常不透明度的？重置按钮应该可以。但我仍然要处理这个问题。我怀疑我所要做的就是添加。addEventlistener并包括所有原始样式，包括不透明度。你是如何恢复正常不透明度的？重置按钮应该可以。但我仍然要处理这个问题。我同意我所要做的就是添加。addEventlistener并包含所有原始样式，包括不透明度。为什么按钮名为BLUE使其变为橙色？我觉得讲师提供了JS并正在测试学生。为什么按钮名为BLUE使其变为橙色？我觉得讲师提供了JS并正在测试学生。我请注意，在此处运行代码段是有效的。但是，当我尝试使用默认浏览器在我的终端上运行时，它不起作用。有什么建议吗？@Moises，您应该检查

document.getElementById（“box”）.style.color:orange

to

document.getElementById（“box”）.style.color=“orange”的语法；

并始终检查所提供代码最后一行的右括号或右括号

}）我发现在这里运行代码片段是有效的。但是当我尝试使用默认浏览器在我的终端上运行时，它不起作用。有什么建议吗？@Moises，您应该检查
document.getElementById（“box”）.style.color:orange的语法，以
document.getElementById（“box”）.style.color=“orange”并始终检查最后一行的右括号或右括号