Show content when a button is pressed and change colour the active button-CodePudding

I would like to show a content when a button is pressed and change colour of the active button. Currently I'm able to perform both the operation individually, but I don't get how to merge these functionalities.

To show the content, my script looks like :

function changedata(parameter){
  if(parameter==0){
    document.getElementById('myreport').style.display = 'none';
    document.getElementById('mydata').style.display = 'block';
  }
  else{
    document.getElementById('mydata').style.display = 'none';
    document.getElementById('myreport').style.display = 'flex';
  }
}

* {
  margin: 0;
  padding: 0;
}
#mydata{
  display:none;
  font-size: 25;
}
.chartCard {
  width: 100vw;
  height: calc(80vh - 100px);
  background: rgb(133, 43, 43);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chartBox {
  width: 650px;
  padding: 30px;
  border-radius: 20px;
  margin: 1px 22px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}
.button:hover{
  background-color: #005201;
  color: rgb(255, 253, 250);;
}
.button {
  background-color: rgb(69, 9, 188);
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

<button  onclick="changedata(1)">Myreport</button>
<button  onclick="changedata(0)">Mydata</button>
<div id="mydata">
  <h1>This is my Data</h1>
</div>
  <div  id="myreport">
    <div >
      <p>Ram</p>
    </div>
    <div >
      <p>Shyam</p>
  </div>
</div>

I want to highlight the active button so i added .highlight{background-color: green;} in css and a new script as :

var buttons = document.querySelectorAll("button");
for (button in buttons) {
  buttons[button].onclick = function() {
    console.log('test')
    buttons.forEach(function(btn){
      btn.classList.remove('highlight');
    })
    this.classList.add('highlight');
  }
}

function changedata(parameter){
  if(parameter==0){
    document.getElementById('myreport').style.display = 'none';
    document.getElementById('mydata').style.display = 'block';
  }
  else{
    document.getElementById('mydata').style.display = 'none';
    document.getElementById('myreport').style.display = 'flex';
  }
}

var buttons = document.querySelectorAll("button");
for (button in buttons) {
  buttons[button].onclick = function() {
    console.log('test')
    buttons.forEach(function(btn){
      btn.classList.remove('highlight');
    })
    this.classList.add('highlight');
  }
}

* {
  margin: 0;
  padding: 0;
}
#mydata{
  display:none;
  font-size: 25;
}
.chartCard {
  width: 100vw;
  height: calc(90vh - 100px);
  background: rgb(133, 43, 43);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chartBox {
  width: 650px;
  padding: 30px;
  border-radius: 20px;
  margin: 1px 22px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}
.button:hover{
  background-color: #005201;
  color: rgb(255, 253, 250);;
}
.button {
  background-color: rgb(69, 9, 188);
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.highlight {
  background-color: green;
}

<button  onclick="changedata(1)">Myreport</button>
<button  onclick="changedata(0)">Mydata</button>
<div id="mydata">
  <h1>This is my Data</h1>
</div>
<div  id="myreport">
  <div >
    <p>Ram</p>
  </div>
  <div >
    <p>Shyam</p>
  </div>
</div>

How to achieve both the functionality together ? kindly looking for help.

CodePudding user response：

You just need to remove the class in changedata() and add it to the clicked element.

document.querySelectorAll(".button").forEach((e) => {
    e.classList.remove('highlight');
});
event.target.classList.add('highlight');

function changedata(parameter){
  document.querySelectorAll(".button").forEach((e) => {
    e.classList.remove('highlight');
  });
  event.target.classList.add('highlight');
  if(parameter==0){
    document.getElementById('myreport').style.display = 'none';
    document.getElementById('mydata').style.display = 'block';
  }
  else{
    document.getElementById('mydata').style.display = 'none';
    document.getElementById('myreport').style.display = 'flex';
  }
}

* {
  margin: 0;
  padding: 0;
}
#mydata{
  display:none;
  font-size: 25;
}
.chartCard {
  width: 100vw;
  height: calc(90vh - 100px);
  background: rgb(133, 43, 43);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chartBox {
  width: 650px;
  padding: 50px;
  border-radius: 20px;
  margin: 1px 22px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}
.button:hover{
  background-color: #005201;
  color: rgb(255, 253, 250);;
}
.button {
  background-color: rgb(69, 9, 188);
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.highlight {
  background-color: green;
}

<button  onclick="changedata(1)">Myreport</button>
<button  onclick="changedata(0)">Mydata</button>
<div id="mydata">
  <h1>This is my Data</h1>
</div>
<div  id="myreport">
  <div >
  <p>Ram</p>
</div>
<div >
  <p>Shyam</p>
  </div>
</div>

CodePudding user response：

You are using .onclick on the buttons twice. By doing this the first function will be overwritten by second function. Solution to that is addEventListener() method. Which attaches an specific event handler to an element. You can also add more than one handler for an event if you use this method.

Keeping functions separate is considered as good practice in JS. In snippet below there is a function named setActiveClass(). There are two parameters first is element and second one is for element's classname. If you want to change the classname you just have to change the value of variable activeClassName rather changing it everywhere.

let myReportBtn = document.getElementById("reportBtn");
let myDataBtn = document.getElementById("dataBtn");

let buttons = document.querySelectorAll("button");

function changedata(bool) {
  let myReport = document.getElementById('myreport');
  let myData = document.getElementById('mydata');
  
  const activeClassName = 'highlight';
  
  if (!bool) {
    myReport.style.display = 'none';
    myData.style.display = 'block';
    setActiveClass(myDataBtn, activeClassName);
  } else {
    myData.style.display = 'none';
    myReport.style.display = 'flex';
    setActiveClass(myReportBtn, activeClassName);
  }
}

function setActiveClass(elem, classname){
  buttons.forEach(function(btn) {
    btn.classList.remove(`${classname}`);
  });
  elem.classList.add(`${classname}`);
}

myReportBtn.addEventListener("click", function(){
  changedata(true);
});

myDataBtn.addEventListener("click", function(){
  changedata(false);
});

* {
  margin: 0;
  padding: 0;
}

#mydata {
  display: none;
  font-size: 25;
}

.chartCard {
  width: 100vw;
  height: calc(50vh - 100px);
  background: rgb(133, 43, 43);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chartBox {
  width: 650px;
  padding: 50px;
  border-radius: 20px;
  margin: 1px 22px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}

.button:hover {
  background-color: #005201;
  color: rgb(255, 253, 250);
}

.button {
  background-color: rgb(69, 9, 188);
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.highlight {
  background-color: yellow;
}

<!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>Document</title>
</head>

<body>
  <button  id="reportBtn">Myreport</button>
  <button  id="dataBtn">Mydata</button>
  <div id="mydata">
    <h1>This is my Data</h1>
  </div>
  <div  id="myreport">
    <div >
      <p>Ram</p>
    </div>
    <div >
      <p>Shyam</p>
    </div>
  </div>

</body>

</html>