Switch the Javascript between two buttons-CodePudding

I tried to make a javascript code to make my button background color change when onclick event, but I want once I click on one the other stays as it is

the Html code :

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--Link Css extension file!-->
    <link rel="stylesheet" href="style.css">
    <!--Fonts extension-->
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


</head>
<body>
                    <!--onclick js action-->
                    <div  role="group" aria-label="account-type">
                        <button type="button" id="btnl"  onclick="onclick()">Learner</button>
                        <button type="button" id="btne"  onclick="onclick()">Educator</button>
                    </div>
                   
    <script src="http;//unpkg.com/@popperjs/[email protected]/dist/umd/popper.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="app.js"></script>
</body>
</html>

the Javascript code:

let btne = document.getElementById('btne');
let btnl = document.getElementById('btnl');

document.addEventListener('click', function leftClick(){
    btne.style.backgroundColor = '#37D7BB'
    btne.style.color = 'white'
    btl.disable = true;

});
document.addEventListener('click', function rightClick(){
    btnl.style.backgroundColor = '#37D7BB'
    btnl.style.color = 'white'
    bte.disable = true;

});

CodePudding user response：

TL;DR. Use CSS property to toggle their visual state.

See the reduced code snippet below.

.btn class will make every button background white by default.
When data-active attribute is set to true, however, its background color will change.
Use JavScript to listen for click on each button and toggle its dataset.active value (i.e. data-active attribute of the element).
It'll then automatically update the visual state via CSS.

const btns = document.querySelectorAll('button');

const toggle = e => {
  btns.forEach(btn => btn.dataset.active = btn === e.target);
};

btns.forEach(btn => btn.addEventListener('click', toggle));

.btn {
  background: #fff;
}

[data-active="true"] {
  background: #33d7bb;
}

<div aria-label="account-type">
  <button type="button" id="btnl"  data-active="false">Learner</button>
  <button type="button" id="btne"  data-active="false">Educator</button>
</div>

CodePudding user response：

Remove the `onclick = "onclick()"`

That is extra code that is not needed and possibly will create errors. .addEventListener() will run and check for clicks as soon as the code runs.

Example:

var btn = document.getElementById("background");
btn.addEventListener("click", function(){
    document.body.style.background = 'black';
});

/************************
  This works too:
  document.getElementById("background").addEventListener(...);
************************/

button{
  font-size: 23px;
}
body{
  background: white;
}

<button id = "background">Click Me to change the background color of the page without 'onclick'!</button>

<!-- <script src="yourfile.js"></script> -->

Something's Wrong with the `document.addEventListener()`

Well, here's the part that answers your question. You are seeing this because the button doesn't actually do anything when you click it. You put 'document' so that means when you click anywhere on the web page(the <body>) it will change the button color.

You do this: Put either btne or btnl on the matching .addEventListener() instead of document.

bte and btl are not defined.

CodePudding user response：

I see a few problems here.

Your buttons are calling the same function 'onClick()' which doesnt seem to exist. There is no need for it if you are using an event listener so it can be removed.

Both addEventListeners need to look at the elements not the document

btne.addEventListener('click', function leftClick(){});

btnl.addEventListener('click', function leftClick(){});

Your 'disable' statements have typos so they cant affect the buttons.
Both functions are setting the same color so you cant see any changes to colors.

TL;DR. Use CSS property to toggle their visual state.

Remove the onclick = "onclick()"

Something's Wrong with the document.addEventListener()

bte and btl are not defined.

Remove the `onclick = "onclick()"`

Something's Wrong with the `document.addEventListener()`