CODEWITHSUNDEEP
javascript
Zartex
Zartex

Reputation: 13

How to "do something" if 3 buttons clicked ? (I tried with this : )

Im having troubles with one part of my code. Yesterday, I tried it and it was fully working, and now it is not working anymore. I really don't understand so if you guys see something, tell me !

var FERNC1 = document.getElementById('pc1');
var FERNC2 = document.getElementById('pc11');
var UNNC1 = document.getElementById('pc8');

FERNC1.addEventListener('click', function () {
    fer1 = 1;
    bronze1 = 0;
    argent1 = 0;
    or1 = 0;
    platine1 = 0;
    diamant1 = 0;
    immortel1 = 0;
    console.log(fer1);
    FERNC2.addEventListener('click', function () {
        fer2 = 1;
        bronze2 = 0;
        argent2 = 0;
        or2 = 0;
        platine2 = 0;
        diamant2 = 0;
        immortel2 = 0;
        console.log(fer2);
        UNNC1.addEventListener('click', function () {
            un1 = 1;
            deux1 = 0;
            trois1 = 0;
            console.log(un1);

            if ((fer1 == 1 && fer2 == 1 && un1 == 1)) {
                document.getElementById('pc88').classList.add('inactiveLink');
                document.getElementById("s7").style.display = "block";
                document.getElementById("s8").style.display = "none";
                document.getElementById("s9").style.display = "none";
            }
            else {
                document.getElementById('pc88').classList.remove('inactiveLink');
                document.getElementById("s7").style.display = "none";
                document.getElementById("s8").style.display = "none";
                document.getElementById("s9").style.display = "none";
            }
        });
    });
});

Thank you guys

Upvotes: 0

Views: 601

Answers (3)

mehdi musavi
mehdi musavi

Reputation: 418

The bets must be checked each time the buttons are clicked, like below:

FERNC1.addEventListener('click', function () {
fer1 = 1;
bronze1 = 0;
argent1 = 0;
or1 = 0;
platine1 = 0;
diamant1 = 0;
immortel1 = 0;
console.log(fer1);
if ((fer1 == 1 && fer2 == 1 && un1 == 1)) {
            document.getElementById('pc88').classList.add('inactiveLink');
            document.getElementById("s7").style.display = "block";
            document.getElementById("s8").style.display = "none";
            document.getElementById("s9").style.display = "none";
        }
        else {
            document.getElementById('pc88').classList.remove('inactiveLink');
            document.getElementById("s7").style.display = "none";
            document.getElementById("s8").style.display = "none";
            document.getElementById("s9").style.display = "none";
        }
}
FERNC2.addEventListener('click', function () {
    fer2 = 1;
    bronze2 = 0;
    argent2 = 0;
    or2 = 0;
    platine2 = 0;
    diamant2 = 0;
    immortel2 = 0;
    console.log(fer2);
    if ((fer1 == 1 && fer2 == 1 && un1 == 1)) {
        document.getElementById('pc88').classList.add('inactiveLink');
        document.getElementById("s7").style.display = "block";
        document.getElementById("s8").style.display = "none";
        document.getElementById("s9").style.display = "none";
    }
    else {
        document.getElementById('pc88').classList.remove('inactiveLink');
        document.getElementById("s7").style.display = "none";
        document.getElementById("s8").style.display = "none";
        document.getElementById("s9").style.display = "none";
    }
  }
UNNC1.addEventListener('click', function () {
        un1 = 1;
        deux1 = 0;
        trois1 = 0;
        console.log(un1);

        if ((fer1 == 1 && fer2 == 1 && un1 == 1)) {
            document.getElementById('pc88').classList.add('inactiveLink');
            document.getElementById("s7").style.display = "block";
            document.getElementById("s8").style.display = "none";
            document.getElementById("s9").style.display = "none";
        }
        else {
            document.getElementById('pc88').classList.remove('inactiveLink');
            document.getElementById("s7").style.display = "none";
            document.getElementById("s8").style.display = "none";
            document.getElementById("s9").style.display = "none";
        }
    });

Upvotes: 1

Papa_Ubu
Papa_Ubu

Reputation: 49

Can't you just add a class to your elements ?

Then it would be :

var clickableElement = document.querySelector('.customClass');

clickableElement.addEventListener('click', function () {

    if (this.id == "pc1") {

        fer1 = 1;
        bronze1 = 0;
        argent1 = 0;
        or1 = 0;
        platine1 = 0;
        diamant1 = 0;
        immortel1 = 0;
        console.log(fer1);

    } else if (this.id == "pc11") {

        fer2 = 1;
        bronze2 = 0;
        argent2 = 0;
        or2 = 0;
        platine2 = 0;
        diamant2 = 0;
        immortel2 = 0;
        console.log(fer2);

    } else if (this.id == "pc8") {

        un1 = 1;
        deux1 = 0;
        trois1 = 0;
        console.log(un1);

        if ((fer1 == 1 && fer2 == 1 && un1 == 1)) {
            document.getElementById('pc88').classList.add('inactiveLink');
            document.getElementById("s7").style.display = "block";
            document.getElementById("s8").style.display = "none";
            document.getElementById("s9").style.display = "none";
        }
        else {
            document.getElementById('pc88').classList.remove('inactiveLink');
            document.getElementById("s7").style.display = "none";
            document.getElementById("s8").style.display = "none";
            document.getElementById("s9").style.display = "none";
        }

    }

}

Upvotes: 0

jsN00b
jsN00b

Reputation: 3691

Requirement:

  • There are 3 buttons
  • When all three buttons are clicked (in any order, and any number of times greater than 1), some particular block-of-code needs to be executed.

Approach:

const clickCounter = { btn1: 0, btn2: 0, btn3: 0 };
const areOtherBtnsClicked = (btn = 'btn1') => ( 
  Object.entries(clickCounter).reduce(
    (f, ([k, v])) => (k === btn ? f : f && v > 0),
    true
  )
);
const btnClickHandler = (btnNumber = 'btn1') => {
  clickCounter[btnNumber]++;
  if (areOtherBtnsClicked(btnNumber)) {
    someCodeBlock;
  }
};

Then, within the relevant part of the script, the btnClickHandler may be listed as the click-handler for each button by passing the button-number as an argument. So, something like this: addEventListener('click', ('<<bt1 or btn2 or btn3 goes here>>') => btnClickHandler()).

Some syntax errors may be present in above. Please comment or edit as necessary.

Upvotes: 0

Related Questions