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

Question

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" class="enable" type="button">1</button>
<button id="Act2" class="disable" 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 !

`if (clickTrue1 === true)` - nothing has changed the value of clickTrue1 at this point, it is still false. The only thing you did in the meantime is add click handlers, but the user did not actually get a chance to click anywhere. — CBroe, Oct 11 '22 at 08:14
(And please stop using `if` _without_ curly braces, that is absolutely terrible style.) — CBroe, Oct 11 '22 at 08:15
Does this answer your question? [Disable/Non-Clickable an HTML button in Javascript](/q/22456641/90527) — outis, Oct 11 '22 at 08:19
You don't need **two** classes *enable, disable*, only the *disable* one. The rest is default styles. — Roko C. Buljan, Oct 11 '22 at 08:20
Also, use rather the `disabled` property instead of classNames. It can also be styled using the CSS `:disabled` selector. — Roko C. Buljan, Oct 11 '22 at 08:22

score 0 · Accepted Answer · answered Oct 11 '22 at 08:17

0

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

answered Oct 11 '22 at 08:17

Sunlight

165
1
11

Just a small matter of style. It is sometimes recommended by some style guides never to use equality operators against boolean values, and to rather use `if(clickTrue1)` and `if(!clickTrue1)` etc. `=== true` etc. is redundant and more verbose, while the variable name should be chosen to be meaningful (which has the side effect that the `if` statement reads a little more like English (e.g. `if(act1Clicked)` reads as "If act1 has been clicked"). – frIT Oct 11 '22 at 08:23
Actually you can't always do that in javascript. `0, undefined, false, ""` these all are considered false in javascript. So `bool !== bool` is safer for it. Though in this case it is safe to use `if(!bool)` – Sunlight Oct 11 '22 at 12:02

score 0 · Answer 2 · answered Oct 11 '22 at 08:23

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" class="enable" type="button">1</button>
<button id="Act2" class="disable" type="button">2</button>

zer00ne · Answer 3 · 2022-10-11T08:55:01.007

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 class="A"></button>
<button class="B" disabled></button>

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

3 Answers3