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.1＆＃39;和答案2＆＃39;回答1.2＆＃39;。都好。

但是现在我想再次点击按钮1，它应该改为＆＃39;答案1.1.1＆＃39;和答案1.1.2＆＃39;。

在这里，我被困住了。我在执行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>

Answer 2

这是你打算做的吗？如果是这样，您可以在空格上拆分按钮文本，所有1.1.1内容都将成为第二个索引。然后，根据您是否单击第一个按钮，只需将文本更改为Answer 1.加上您拆分的文本。

＆＃13;

function a1Change(elem) {

    if (elem.id == "b1") {

        var ans1 = document.getElementById("a1").innerHTML.split(' ');
        var ans2 = document.getElementById("a2").innerHTML.split(' ');

        document.getElementById("a1").innerHTML = "Answer 1." + ans1[1] ;
        document.getElementById("a2").innerHTML = "Answer 1." + ans2[1];

    } else if (elem.id == "b2") {
      
        var ans1 = document.getElementById("a1").innerHTML.split(' ');
        var ans2 = document.getElementById("a2").innerHTML.split(' ');

        document.getElementById("a1").innerHTML = "Answer 2." + ans1[1] ;
        document.getElementById("a2").innerHTML = "Answer 2." + ans2[1];
    }
}

＆＃13;

<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>

＆＃13;

Answer 3

非常感谢你的帮助。你的想法激发了我自己的方法，现在对我来说很好。我没有发布整个代码，但你可以继续使用这个方法。只需要添加越来越多的变量。

对不起我的解决方案中的所有德语。希望它仍然可以理解。

<!DOCTYPE html>
<html>
<body>
<p id="s1">Hi, wie gehts?</p>

<button id="b1" type="button" onclick="a1Change(this)"><p id="a1">Gut. (Antwort 1)</p></button>
<button id="b2" type="button" onclick="a1Change(this)"><p id="a2">Ganz gut (Antwort 2)</p></button>
<button id="b3" type="button" onclick="a1Change(this)"><p id="a3">Naja, nicht so geil. (Antwort 3)</p></button>
<button id="b4" type="button" onclick="a1Change(this)"><p id="a4">Echt beschissen. (Antwort 4)</p></button>

var x = 0;
var y = 0;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;

function a1Change(elem) {

x += 1;
y += 1;
x1 += 1;
y1 += 1;
x2 += 1;
y2 += 1;

var a1 = document.getElementById("a1"),
    a2 = document.getElementById("a2"),
    a3 = document.getElementById("a3"),
    a4 = document.getElementById("a4"),
    s1 = document.getElementById("s1");


if ((elem.id == "b1" || elem.id == "b2") && x == 1) {

    a1.innerHTML = "Und wie gehts dir? (Antwort 1.1)";
    a2.innerHTML = "Alles gut? (Antwort 1.2)";
    a3.innerHTML = "Hast du viel zu tun? (Antwort 1.3)";
    a4.innerHTML = "Wie gehts mit der Arbeit? (Antwort 1.4)";
    s1.innerHTML = "Schoen.";
    x += 1;


} else if ((elem.id == "b3" || elem.id == "b4") && y == 1) {

    a1.innerHTML = "Mein Chef ist suuuper nervig! (Antwort 3.1)";
    a2.innerHTML = "Die Arbeit ist echt anstrengend ... (Antwort 3.2)";
    a3.innerHTML = "Lisbeth hat mich verlassen :( (Antwort 3.3)";
    a4.innerHTML = "ICH hab meine Freundin stehen lassen 8) (Antwort 3.4)";
    s1.innerHTML = "Oh nein, was ist denn los?";
    y += 1;

} else if ((elem.id == "b1" || elem.id == "b2") && x == 3 && y < 3) {

    a1.innerHTML = "Schoen zu hoeren. (Antwort 1.1.1)";
    a2.innerHTML = "Das freut mich. (Antwort 1.1.2)";
    a3.innerHTML = "Ist Anna eigentlich gegangen? (Antwort 1.1.3)";
    a4.innerHTML = "Ich hab gehoert du hast dich von deiner Freundin getrennt? (Antwort 1.1.4)";
    s1.innerHTML = "Bei mir ist alles wie beim Alten.";
    x1 += 1;

} else if ((elem.id == "b3" || elem.id == "b4") && x == 3 && y < 3) {

    a1.innerHTML = "Ja, kenn ich. (Antwort 1.3.1)";
    a2.innerHTML = "Bei mir genau dasselbe! (Antwort 1.3.2)";
    a3.innerHTML = "Kriegst du inzwischen mehr Lohn? (Antwort 1.3.3)";
    a4.innerHTML = "Du solltest dich echt um eine Gehaltserhoehung kuemmern! (Antwort 1.3.4)";
    s1.innerHTML = "Ach die Arbeit ist stressig wie immer.";
    x2 += 1;

javascript onclick更改功能

3 个答案: