AnswerBun.com

button to act as checkbox and change styles?

On my assignment I am only allowed to use a button, so no checkbox. Onclick of the button, certain info in shown. The code I have is working, but my question is how can I get the class to display: none, when the button is clicked again? Kind of like a toggle?

const displayScores = (e) => {
    if (
      (e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "none")
    ) {
      e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "block";
      e.target.innerHTML = "-";
    } else {
      e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "none";
      e.target.innerHTML = "+";
    }
  };






return (
<div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                <div className="display-score-container">
                  <p className="student-score">
                    Test 1:{" "}
                    <p className="student-percentage">{students.grades[0]}%</p>
                  </p>
                  
                </div>
              </div>

              <button
                
                onClick={displayScores}
                className="expand-btn"
              >
                +
              </button>
)

Stack Overflow Asked by Jayg713 on December 29, 2020

3 Answers

3 Answers

Here is a simple way to do that. It is working.

const displayScores = e => {
            if (e.target.innerHTML === '+') {
                document.querySelector('.display-score-container').style.display =
                    'none';
                e.target.innerHTML = '-';
            } else {
                document.querySelector('.display-score-container').style.display =
                    'block';
                e.target.innerHTML = '+';
            }
        };

Of course this is not the only solution. It depends on your hole project. Hope that I helped you. Have a nice day :)

Answered by Walid Dkhili on December 29, 2020

You can track the displayScore using the React.useState and update the template based on the state.

const [displayScore, setDisplayScore] = React.useState(true);

const handleDisplayScores = (e) => {
    setDisplayScore(!displayScore);
  };
          

return (
   <div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                {displayScore && (<div  className="display-score-container">
                  <p className="student-score">
                    Test 1:{" "}
                    <p className="student-percentage">{students.grades[0]}% 
                     </p>
                  </p>
                </div>)}

              </div>

              <button  
                onClick={handleDisplayScores}
                className="expand-btn">
                {displayScore ? '-' : '+'}  // set based on your use case.
              </button>
)

Answered by Sarun UK on December 29, 2020

You can use 'active' class or some class for that and write css for that particular Class Name. On click add that class to the button and toggle the values. and put the condition on the class you have added if (active){..} else{..}.

Answered by Himanshu Patni on December 29, 2020

Add your own answers!

Related Questions

How to print a column using awk command line and add header

3  Asked on November 4, 2020 by maskiin

     

Create repeated declaration

5  Asked on November 3, 2020 by ferenc-deak

   

Why is synchronizing a method not advisable?

3  Asked on November 2, 2020 by linus-jame

     

How to filter array of objecs with an object

3  Asked on October 31, 2020 by zkk

     

Trying to have c++ program quit by inputting a letter

2  Asked on October 29, 2020 by elizabethcampbell441

 

reload page from express using setInterval

2  Asked on October 24, 2020 by dwayne-jackson

       

Jquery .last() equivalence to Javascript

1  Asked on October 23, 2020 by divja-afsa

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.