Javascript make button unclickable

Question

My problem is that, I have button like below

<button type="button" id="btn_all">All</button>
<button type="button" id="btn_A">A</button>
<button type="button" id="btn_B">B</button>
<button type="button" id="btn_C">C</button>

And my javascript is

let btn_all = document.getElementById("btn_all");
let btn_A = document.getElementById("btn_A");
let btn_B = document.getElementById("btn_B");
let btn_C = document.getElementById("btn_C");

let allButtons = [btn_all,btn_A,btn_B,btn_C];

let abt = btn_A.style.backgroundColor = "red";

function changeColor (e) {
    
    let currentColor = e.target.style.backgroundColor;
    if (currentColor != "red") {
        e.target.style.backgroundColor = "red";
    }else{       
        e.target.style.backgroundColor = "";
    }
    
}

function changeColorAll (e) {
    let currentColor = e.target.style.backgroundColor;
    if (currentColor != "red") {
        allButtons.forEach( function(element, index) {
            
            element.style.backgroundColor = "red";
            
        });
    }
    else {
        allButtons.forEach( function(element, index) {
            if (index === (allButtons.length -3)) {
                
                element.style.backgroundColor = "red";

            }else{
                element.style.backgroundColor = "";
            }
            
        });
    }
}

btn_all.addEventListener("click", changeColorAll);
btn_A.addEventListener("click", changeColor);
btn_B.addEventListener("click", changeColor);
btn_C.addEventListener("click", changeColor);

1 - When I click on button A,B,C, to change it's background to red, button All also change it's backgroudColor to red.

2- When I click on All button to change its and others to no backgroudColor, at least one button still red and prevent it not changeable the color. Anybody can help please.

UPDATE

I want to update my problems.

1 - When I first load the page all four button has no backgroudcolor except button A has background in red. If I click on B, C, button, I want button All change to red also.

2- When I click on button All to change all button to no background color, I want one of these buttons( A, B, C) still red and can not click to change color.

Could you provide your codes on an online editor like Jsfiddle/codepen so that we can check the output? — Sajib Khan
– Sajib Khan, Commented Jan 9, 2021 at 3:45
Could you clarify what the expected behaviour for each button click is? — juliomalves
– juliomalves, Commented Jan 9, 2021 at 11:46
I want to update my problems. It's may because my English is not good enough to explain to you of my problem. 1 - When I first load the page all four button has no backgroudcolor except button A has background in red. If I click on B, C, button, I want button All change to red also. 2- When I click on button All to change all button to no background color, I want one of these buttons( A, B, C) still red and can not click to change color. If you have anything for me to clarify please tell me. I really need this code. — Naruto Saitama
– Naruto Saitama, Commented Jan 10, 2021 at 9:26

Yash Maheshwari · Accepted Answer · 2021-01-10 13:31:56Z

For your 1st point, add a condition in the changeColor method to check whether all the buttons are red or not.

if (btn_A.style.backgroundColor == "red" && btn_B.style.backgroundColor == "red" && btn_C.style.backgroundColor == "red") {
    btn_all.style.backgroundColor = "red";
} else {
    btn_all.style.backgroundColor = "";
}

For your 2nd point, remove the if-else condition from the changeColorAll else part and just update the color directly.

function changeColorAll (e) {
let currentColor = e.target.style.backgroundColor;
if (currentColor != "red") {
    allButtons.forEach( function(element, index) {
        
        element.style.backgroundColor = "red";
        
    });
}
else {
    allButtons.forEach( function(element, index) {
            element.style.backgroundColor = "";
            btn_A.style.backgroundColor = "red";
    });
}}

Also, add a condition in the changeColor to check whether all the buttons are not of red color, if not then change the color of a button

if (btn_A.style.backgroundColor == "" && btn_B.style.backgroundColor == "" && btn_C.style.backgroundColor == "") {
    btn_A.style.backgroundColor = "red"
}

Kavinda Senarathne · Accepted Answer · 2021-01-09 03:47:06Z

0

//HTML
$('#Button').prop('disabled', true);
//JS
document.getElementById("Button").disabled = !0;

answered Jan 9, 2021 at 3:47

Kavinda Senarathne

2,01015 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript make button unclickable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related