javascript - 如何创建多个由 javascript 驱动的按钮以在 insidehtml 中显示文本？

Question

我创建了一个简单的网站用于学习目的，有 2 个按钮(一个问题有 2 个遮阳篷)，比方说:

按钮A和按钮B

当您点击A时，它将通过innerHtml在我的网站上的div内显示答案A，当您点击B时，它将显示答案B或替换awnser A 与 awnser B 位于innerHtml 内，反之亦然。

到目前为止，我认为我通过使用在 Stackoverflow 上找到的一些脚本知道它是如何工作的。

但现在我想使用与上面提到的相同的系统为问题 2 创建 2 个以上的按钮

所以按钮 C 和 D，但它一直干扰按钮 A 和 B。

我希望这里有人可以帮助我创建一个页面，可以在单击时显示问题 2 的遮阳篷，位于问题 1 的遮阳篷下方，而不会造成干扰。

现在我正在使用下面所示的代码来解决问题 1:

<button id="choiceA" class="Button" question-one="Awnser 1" onclick="questionOne(this)">
   Q 1 choice A
  </button>

  <button id="ChoiceB" class="Button" question-one="Awnser 2" onclick="questionOne(this)">
    Q1 choice B
  </button>

这是脚本:

function questionOne(elem) {
  var x = document.getElementById("questionOne");
  var description = elem.getAttribute('question-one');
  x.innerHTML = description;

  var button = document.getElementsByClassName('js-button');

  for (var i = 0; i < button.length; i++) {
    button[i].classList.remove('active-button');
  }

  elem.classList.add('active-button');
}

问题 2 的代码:

<button id="choiceA" class="Button" question-two="Awnser 1" onclick="questionTwo(this)">
   Q 2 choice A
  </button>

  <button id="ChoiceB" class="Button" question-two="Awnser 2" onclick="questionTwo(this)">
    Q 2 choice B
  </button>

脚本:

function questionTwo(elem) {
  var x = document.getElementById("questionTwo");
  var description = elem.getAttribute('question-two');
  x.innerHTML = description;

  var button = document.getElementsByClassName('js-button');

  for (var i = 0; i < button.length; i++) {
    button[i].classList.remove('active-button');
  }

  elem.classList.add('active-button');
}

Answer 1

您可以有问题选择和一个部分，其中答案将显示在 div 容器中。然后，您可以通过获取单击的按钮元素的 parentElement 以及其中的 div 来获取 div (用于显示答案)。

document.querySelectorAll('button')
  .forEach(button => {
    button.addEventListener('click', function() {
      const div = this.parentElement.querySelector('div');
      div.textContent = this.dataset.ans;
    });
  });

<div>
  <div class="question-one"></div>
  <button class="Button" data-ans="First question choice A">choice A</button>

  <button class="Button" data-ans="First question choice B">choice B</button>
</div>
<div>
  <div class="question-two"></div>
  <button class="Button" data-ans="Second question choice A">choice A</button>

  <button class="Button" data-ans="Second question choice B">choice B</button>
</div>