Question

我试图通过JS更改对象的类，以便我可以使用onclick =“document.getElementByID ...”更改CSS样式。

<div class="box2"      onClick="document.getElementById('hidegetstartedcontainer').id = 'showgetstartedcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
<span id=red>GET </span></br>
<span id=redbold>STARTED</span> 
</div>

<div class="box4" onClick="document.getElementById('hidegetintouchcontainer').id = 'showgetintouchcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
<span id=redbold>GET IN TOUCH</span></br>
<span id=red>WITH US</span> 
</div>

触发上述操作会按预期工作。现在在showgetstartedcontainer以及showgetintouchcontainer中我有一个关闭按钮，它应该触发反转：

<div id="hidegetstartedcontainer">
<div class="close1" onclick="document.getElementById('showgetstartedcontainer').id = 'hidegetstartedcontainer'; document.getElementById('pagecontainer-blur').id = 'pagecontainer-noblur'"></div>
</div>

<div id="hidegetintouchcontainer">
<div class="close2" onclick="document.getElementById('showgetintouchcontainer').id = 'hidegetintouchcontainer'; document.getElementById('pagecontainer-blur').id = 'pagecontainer-noblur'"></div>       
</div>

预期是：.close1触发#showgetstartedcontainer .close2触发#showgetintouchcontainer

结果是：.close1触发#showgetintouchcontainer以及close2

由于#showgetintouchcontainer的触发确实发生而没有先触发相反的方式，因此showgetintouchcontainer不存在，会出现错误“null不是对象”。

为什么.close1会触发错误的对象？任何帮助表示赞赏。

欢呼声

Answer 1

id在同一文档中应该是唯一的，尝试用全局类替换duplicatd ID。

如果您避免使用内联事件，并在js中编写函数，那就更好了：

<div class="box2" onClick="document.getElementById('hidegetstartedcontainer').id = 'showgetstartedcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
  <span class=red>GET </span><br/>
  <span class=redbold>STARTED</span> 
</div>

<div class="box4" onClick="document.getElementById('hidegetintouchcontainer').id = 'showgetintouchcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
  <span class=redbold>GET IN TOUCH</span><br/>
  <span class=red>WITH US</span> 
</div>

注意：如果您避开内联事件，则更好，并在您的js中创建事件。

希望这有帮助。

document.ElementById触发错误的Object

1 个答案: