How to avoid the start of a function if a condition is not fulfill in javascript-CodePudding

I would like the user not to be able to click on the second button if the first one was not clicked. I thought about using a condition with a bullet but I can't find the right way to set it up. I share the code with you :

HTML :

<style>
    .enable{
        background-color: orangered;
        pointer-events: auto;
        cursor: pointer;
    }

    .disable{
        background-color: gray;
        pointer-events: none;
    }


</style>
<button id="Act1"  type="button">1</button>
<button id="Act2"  type="button">2</button>

JS :

let act1 = document.getElementById('Act1')
let act2 = document.getElementById('Act2')
let clickTrue1 = false


function act1Clicked(){
    clickTrue1 = true;
    act2.classList.remove("disable");
    act2.classList.add("enable");
    localStorage.setItem('btn2-enabled', true);
}

if (localStorage.getItem('btn2-enabled'))
    act1Clicked();
act1.addEventListener('click', act1Clicked);


if (clickTrue1 === true) {
    function act2Clicked(){
        act3.classList.remove("disable");
        act3.classList.add("enable");
        localStorage.setItem("btn3-enabled", true);
    }

    if(localStorage.getItem("btn3-enabled"))
        act2Clicked();
    act2.addEventListener('click', act2Clicked);
}

I think my problem is that when I set my clickTrue1 to true, the true stays in my function?

Thanks !

CodePudding user response：

function act2Clicked(){
    if (clickTrue1 !== true) return;

    act3.classList.remove("disable");
    act3.classList.add("enable");
    localStorage.setItem("btn3-enabled", true);
}

Remove the wrapping if statement and just exit from the function if clickTrue1 is not true

CodePudding user response：

Does this help you? I removed the localStorage stuff because I wasn't sure how you wanted it to work.

let act1 = document.getElementById('Act1')
let act2 = document.getElementById('Act2')
let clickTrue1 = false

function act1Clicked() {
    console.log('act1Clicked')
    clickTrue1 = true
    act2.classList.remove("disable")
}

function act2Clicked() {
    console.log('act2Clicked')
}

act1.addEventListener('click', act1Clicked)
act2.addEventListener('click', act2Clicked)

button {
    background-color: orangered;
    pointer-events: auto;
    cursor: pointer;
}

.disable{
    background-color: gray;
    pointer-events: none;
}

<button id="Act1"  type="button">1</button>
<button id="Act2"  type="button">2</button>

CodePudding user response：

Not really sure why there needs to be so much code for such a simple problem... is there more? Button B should have the disabled attribute. Bind the "click" event to Button A. The event handler finds Button B and removes the disabled attribute from it.

document.querySelector(".A").onclick = e => 
document.querySelector(".B").disabled = false;

button {font-size: 5ch; cursor: pointer;}
[disabled] {opacity:0.5}

<button >