TransWikia.com

button to act as checkbox and change styles?

Stack Overflow Asked by Jayg713 on December 29, 2020

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>
)

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!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP