javascript onclick 更改函数

Question

我目前正在开展一个学生项目，并且我被这个问题困扰了相当长一段时间。我想一键执行不同的功能。

这些是我的按钮:

<button id="b1" type="button" onclick="a1Change(this)"><p id="a1">Answer 1</p></button>
<button id="b2" type="button" onclick="a1Change(this)"><p id="a2">Answer 2</p></button>

现在我有了 JS 函数:

function a1Change(elem) {

if (elem.id == "b1") {

    document.getElementById("a1").innerHTML = "Answer 1.1";
    document.getElementById("a2").innerHTML = "Answer 1.2";

} else if (elem.id == "b2") {

    document.getElementById("a1").innerHTML = "Answer 2.1";
    document.getElementById("a2").innerHTML = "Answer 2.2";
}

如果单击第一个按钮，会将“答案 1”更改为“答案 1.1”，将“答案 2”更改为“答案 1.2”。都好。

但现在我想再次单击按钮 1，它应该更改为“Answer 1.1.1”和“Answer 1.1.2”。

我被困住了。我尝试在执行 a1Change 后更改 onclick 函数，但我不知道如何操作。或者也许您有更好的想法来解决这个问题。

Answer 1

您可以使用变量执行类似的操作

var i = 0;
function a1Change(elem) {
  var a1 = document.getElementById("a1"),
    a2 = document.getElementById("a2");
  if (elem.id == "b1" && i != 1) {
    // check previously clicked button by checking value of i
    a1.innerHTML = "Answer 1.1";
    a2.innerHTML = "Answer 1.2";
    i = 1;
    // update value of i based on click button
  } else if (elem.id == "b2" && i != 2) {
    // check previously clicked button by checking value of i
    a1.innerHTML = "Answer 2.1";
    a2.innerHTML = "Answer 2.2";
    i = 2;
    // update value of i based on click button
  } else {
    // in case same button is clicked more than once just concate string with it
    a1.innerHTML += '.1';
    a2.innerHTML += '.2';
  }
}

<button id="b1" type="button" onclick="a1Change(this)">
  <p id="a1">Answer 1</p>
</button>
<button id="b2" type="button" onclick="a1Change(this)">
  <p id="a2">Answer 2</p>
</button>