Trying to switch a button from off to on and back again what might be the problem...?-CodePudding

So I was trying to make a button that upon clicking on it changes its style and upon clicking it again changes its style to the original one. I am very exhausted and my brain works on 10%, I feel deeply ashamed of myself for not being able to figure it out since I've already done it a couple of times. Sorry for the stupid question, I have been reading through google to see how to do it I used to do it on my own without searching for a method to do it and I know it's nothing complicated but I just don't know why my code doesn't work.............

<!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>
    <div class="center">
        <button class="buttons-for-the-books" id="testerbuton">Buy</button>
         </div>
          <style>
          .buttons-for-the-books{
            border: 3px solid #191919;
            background-color: white;
            height:42px;
          }
      </style>
      <script>
              var valueto = "off";
      let testerbutona = document.getElementById("testerbuton");
              testerbutona.addEventListener('click',function(){
                if(valueto === "off"){
              testerbutona.style.backgroundColor ="black";
              testerbutona.style.border ="3px solid white";
              testerbutona.style.color ="white";
              valueto = "on";
              }
                if(valueto === "on"){
                   testerbutona.style.bacgroundColor ="white"; 
                  testerbutona.style.border ="3px solid black";
                   testerbutona.style.color ="black";
                    valueto = "off";                                  
                        }
            })
      
      </script>
</body>
</html>

CodePudding user response：

There are 2 mistakes here.

You have misspelt background as bacground in the second if statement.
You need to use an else if statement, otherwise it will always detect the second if statement as being correct because the first one sets it to "on".

<!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>
    <div class="center">
        <button class="buttons-for-the-books" id="testerbuton">Buy</button>
         </div>
          <style>
          .buttons-for-the-books{
            border: 3px solid #191919;
            background-color: white;
            height:42px;
          }
      </style>
      <script>
              var valueto = "off";
      let testerbutona = document.getElementById("testerbuton");
              testerbutona.addEventListener('click',function(){
              if(valueto === "off"){
              testerbutona.style.backgroundColor ="black";
              testerbutona.style.border ="3px solid white";
              testerbutona.style.color ="white";
              valueto = "on";
              }
              else if(valueto === "on"){
                   testerbutona.style.backgroundColor ="white"; 
                  testerbutona.style.border ="3px solid black";
                   testerbutona.style.color ="black";
                    valueto = "off";                                  
                        }
            })
      
      </script>
</body>
</html>

CodePudding user response：

this way

<!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>
  <style>
    .center > button {
      display : block;
      margin  : 1em auto; 
      }
    button.buttons-for-the-books {
      border           : 3px solid lightgrey;
      color            : black;
      background-color : white;
      height           : 42px;
      }
    button.buttons-for-the-books.reverse {
      color            : white;
      background-color : black;
      }
  </style>
</head>
<body>
  <div class="center">
    <button class="buttons-for-the-books" id="testerbuton">Buy</button>
  </div>

  <script>
    const testerbutona = document.getElementById("testerbuton")

    testerbutona.addEventListener('click', function() {
      testerbutona.classList.toggle('reverse')
    })
  </script>
</body>
</html>