javascript onclick change function

Question

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.

You are missing a significant piece of logic here. You will never get the results you are looking for - a dynamically generated answer "number" - with an approach where you are hard-coding the HTML. Have you tried to implement this logic at all? If so, can you show that, as it is not clear what the business logic for when and how you change this "number" is from your question. The desired interactions between the two buttons (or even why there is two buttons) is not clear. Why not clearly identify one button to increment first number component, another to add number component, etc.? — Mike Brant
– Mike Brant, Commented Nov 6, 2015 at 19:00
Hey, thanks for your answer. Our project is a game, where you can select different answers. So it's not about adding a .1 or a .2 . This is just a replacement for text we will be adding later. — Gre3eN
– Gre3eN, Commented Nov 6, 2015 at 21:05

Pranav C Balan · Accepted Answer · 2015-11-06 18:53:33Z

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>

mcon · Accepted Answer · 2015-11-06 19:23:55Z

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>

Gre3eN · Accepted Answer · 2015-11-07 01:56:30Z

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;

Collectives™ on Stack Overflow

javascript onclick change function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related