CODEWITHSUNDEEP
javascripthtmlbuttondom-eventsdisabled-control
Abdullah Ijaz
Abdullah Ijaz

Reputation: 11

I am attempting to 'able' a disabled button after a certain criteria has been met. Having trouble

My HTML looks a like this for the specific button: 

<h1 class = "counter">0</h1>

<button class="btn" type = "button" id = "lowerCountBtn" disabled>Lower Count</button>

In the Javascript, I have made a const variable used query selector to call the HTML element button. Counter was also made into a variable from a class on the HTML code.

My desire is for the disabled button to become an active button once the counter i have made following a tutorial, increase from 0. And when it returns to 0, the button in questions becomes disabled again.

The github link to the code is as follows: https://github.com/Abdullah-Ijaz/Counter

JAVASCRIPT: 

let counter = document.querySelector('.counter');
const button = document.querySelector('button');


function ableButton(){ 
    if (counter.innerHTML === 0) {
        button.disabled = true;
    }
    else if (counter.innerHTML > 0) {
        button.disabled = false;
    }
}

I see the function has been made but I assume I am just not calling the function somehow or the other. I really appreciate the help.

Upvotes: 1

Views: 46

Answers (1)

Abraham Labkovsky
Abraham Labkovsky

Reputation: 1956

You can call your function inside of both your incrementCounter and decrementCounter functions after the rest of the logic.

Also, your conditions in those 2 functions are comparing strings against '0'.

Why not use the count variable and compare numbers if (count > 0) etc

Upvotes: 1

Related Questions