Динамическая веб-страница? (HTML DOM, JS) - PullRequest
0 голосов
/ 03 мая 2018

Я пытаюсь изменить содержимое в HTML с помощью DOM JS. Вместо того, чтобы получать элементы по тегу P, я хочу использовать DIV ID. Это возможно?

В моем 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;
    }

}

Как мне подойти к этому?

1 Ответ

0 голосов
/ 03 мая 2018

Прежде всего, вам не следует присваивать один и тот же идентификатор более чем одному div, поэтому просто присвойте им оба класса - 'ex1' - и затем вы выберете их с помощью селектора javascript с именем getElementsByClassName('class-name') [replace class-name с фактическим именем класса, в данном случае ex1] эта функция получает все элементы с этим именем класса и сохраняет их в массиве. Затем вы делаете логику, для которой кнопка нажата. И когда кнопка нажата, вы должны установить отображение нужного div на «блок» [вы должны по умолчанию скрыть его в 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, как вы делали в исходном коде.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...