• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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>

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

There are 2 mistakes here.

  1. You have misspelt background as bacground in the second if statement.
  2. 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>

almost 3 years ago · Juan Pablo Isaza Report

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error