动态网页？（HTML DOM，js）

Question

我正在尝试使用DOM JS更改HTML中的内容。我希望使用DIV ID而不是通过P标签获取元素。这可行吗？

在我的HTML中，我有两个具有相同名称的独立DIV类。我希望根据用户单击的按钮来显示其中一个。

HTML：

<button type="button" onclick="changeContent(1)" >Example 1</button>
<button type="button" onclick="changeContent(2)" >Example 2</button>

<p id="demoX"></p>

<div class="ex1">
<h1> Example 1 </h1>
<p> nothing </p>
</div>

<div id="ex1">
<h1> Example 2 </h1>
<p> more of nothing </p>
</div>

JS:

function changeContent(inNum) {
    var x = document.getElementById("ex1");

    if (inNum == 1){
         document.getElementById("demoX").innerHTML = x[0].innerHTML;
    }
    else if (inNum == 2){   
     document.getElementById("demoX").innerHTML = x[1].innerHTML;
    }

}

我该如何处理这个问题？

- Ennam Hoque

---

getElementById 返回一个 单一 元素，因为 ID 应该是唯一的。您可以更改类的 ID 并使用 getElementsByClassName（注意 Elements 的复数形式）。 - VLAZ

刚试了一下，完美解决！谢谢。 - Ennam Hoque

Answer 1

首先，您不应该给多个div相同的ID，而是只需给它们相同的class -“ex1”-，然后使用名为getElementsByClassName（'class-name'）的javascript选择器选择它们[将class-name替换为实际类名，在本例中为ex1]此函数获取具有此类名称的所有元素并将其存储在数组中。 然后，您可以对按下哪个按钮进行逻辑处理。 当按下按钮时，您应将所需div的显示设置为“block”[您应在CSS中将其默认设置为隐藏]。

function showDiv(id) {
  
  var divs = document.getElementsByClassName('ex1');
  
  if (id === 'btn1') { divs[0].style.display = 'block' }
  if (id === 'btn2') { divs[1].style.display = 'block' }
  
}

.ex1 {
  width: 300px;
  height: 300px;
  background-color: green;
  display: none;
  margin: 50px;
}

<button id='btn1' onClick='showDiv(this.id)'>button 1</button>
<button id='btn2' onClick='showDiv(this.id)'>button 2</button>

<div class='ex1'>I'm div 1</div>
<div class='ex1'>I'm div 2</div>

你也可以更改 .style 的内容，就像你在原始代码中所做的那样，以更改内部 HTML。

- A.Mostafa