尝试将按钮从关闭切换到打开然后再返回可能是什么问题......？

Question

所以我试图制作一个按钮，单击它会改变其样式，再次单击它会将其样式更改为原始样式。我非常疲惫，我的大脑只工作了 10%，我为自己无法弄清楚而深感惭愧，因为我已经做过几次了。很抱歉这个愚蠢的问题，我一直在通读 google 以了解如何去做我过去常常自己做，而没有寻找一种方法来做，我知道这并不复杂，但我就是不知道为什么我的代码不起作用......

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

Answer 1

这里有2个错误。

您在第二个 if 语句中将 background 拼错为 bacground。
您需要使用 else if 语句，否则它将始终将第二个 if 语句检测为正确，因为第一个将其设置为“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>

Answer 2

这样

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

尝试将按钮从关闭切换到打开然后再返回可能是什么问题......？

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

javascript

events

dom

button

dom-events