CODEWITHSUNDEEP
javascript
Gre3eN
Gre3eN

Reputation: 29

javascript onclick change function

I'm currently working on a student project and I'm stuck with this problem for quite some time. I want to execute on one button different functions.

These are my buttons:

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

Now I have the JS function:

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";
}

If you click on the first button, it changes 'Answer 1' to 'Answer 1.1' and 'Answer 2' to 'Answer 1.2'. All good.

But now I want to click on button 1 again and it should change to 'Answer 1.1.1' and 'Answer 1.1.2'.

And here I'm stuck. I tried to change the onclick function after executing a1Change but I don't know how. Or maybe you have any better ideas how to solve this.

Upvotes: 1

Views: 109

Answers (3)

Gre3eN
Gre3eN

Reputation: 29

So thanks for your help guys. Your ideas inspired me to my own approach that is working fine for me now. I didn't post the entire code but you can go on with this method for quite a bit. Just have to add more and more variables.

Sorry for all the German in my solution. Hope it's still understandable.

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

Upvotes: 0

mcon
mcon

Reputation: 664

Is this what you intend to do? If so, you can just split the button text on the space and all the 1.1.1 stuff will be the second index. Then, depending whether or not you clicked the first button, just change the text to be Answer 1. plus the text you split.

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];
    }
}
<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>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115282

You can do something like this using a variable

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>

Upvotes: 1

Related Questions