如何创建多个使用javascript的按钮，以在innerhtml中显示文本？

我创建了一个简单的学习网站，有两个按钮（一个问题有两个按钮），比如：

按钮A和按钮B

当您单击A时，它将通过innerHtml在我的网站上的div中显示答案A，当您单击B时，它将在innerHtml中显示答案B或将awnser A替换为awnser B，反之亦然

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

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

a按钮C和D，但它一直在干扰按钮a和B

我希望这里有人能帮助我创建一个页面，可以在不受干扰的情况下，在问题1的awnser下方再次单击显示问题2的awnser

现在，我使用问题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>

问题1选择A
Q1选择B

下面是脚本：

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');
}

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');
}

功能问题一（elem）{
var x=document.getElementById（“问题一”）；
var description=elem.getAttribute（'question-one'）；
x、 innerHTML=描述；
var-button=document.getElementsByClassName（'js-button'）；
对于（变量i=0；i

这是问题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>

问题2选择A
问题2选择B

还有剧本：

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');
}

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');
}

功能问题二（elem）{
var x=document.getElementById（“问题二”）；
var description=elem.getAttribute（'question-two'）；
x、 innerHTML=描述；
var-button=document.getElementsByClassName（'js-button'）；
对于（变量i=0；i

您可以选择问题，并在

div

容器中显示答案。然后，通过获取单击按钮元素的

parentElement

，然后获取其中的div，可以获取

div

（以显示答案）

document.querySelectorAll（'button'））
.forEach（按钮=>{
addEventListener（'click'，function（）{
const div=this.parentElement.querySelector（'div'）；
div.textContent=this.dataset.ans；
});
});

选择A
选择B
选择A
选择B
请同时包括按钮C和D的逻辑和标记。@Taplar Done…问题1和问题2是否存在于同一页上？如果是这样的话，你是在重复ID。是的，它都在一页上。。哪个id在重复？很抱歉问一下，但是我仍然在学习，并且在看同一个代码时有点斜视。这两个部分中都有
id=“choiceA”
和
id=“choiceB”
。这些都是重复的。我会说把它们改成类，但是你的逻辑并没有真正使用它们，所以不清楚它们是否需要。谢谢你和我一起思考。我试图实现你的代码，但没有成功？@Taplar-谢谢：）