Question

I have 2 push buttons, I am trying to state that if “1” button is on, turn off the “2” button, else if the “2” button is on, then turn off the “1” button.

But at the moment what is happening is that if I turn on the “2” button, and then turn on the “1” button, then this works fines as “1” button turns on and “2” button turns off. But if I then try and turn “2” button on again, it doesn’t turn it on, it remains off and button “1” remains on. Does anyone know why this is happening?

Below is code:

function btnclick(btn)
{

$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");

    if ($("#answer1").hasClass('answerBtnsOn')) {
        $("#answer2").removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($("#answer2").hasClass('answerBtnsOn')) {
        $("#answer1").removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    return false;
}

below is html for both 1 and 2 buttons:

1 button:

<input class="answerBtns answers answerBtnsOff"   id="answer1"  type="button"   value="1"   onclick="btnclick(this);"/>

2 Button:

<input class="answerBtns answers answerBtnsOff"    id="answer2"         type="button"   value="2"       onclick="btnclick(this);"/>

Answer 1

You’re not checking which button is being clicked.

Something like this should work:

function btnclick(btn)
{
    var $btn = $(btn);
    var id = btn.id;
    var $otherBtn = id === "answer1" ? $("#answer2") : $("#answer1");

    $btn.toggleClass("answerBtnsOff");
    $btn.toggleClass("answerBtnsOn");

    if (btn.hasClass('answerBtnsOn') ) {
        $otherBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if (btn.hasClass('answerBtnsOff')) {
        $otherBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    return false;
}