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

0

158
Views
Intentando cambiar un botón de apagado a encendido y viceversa, ¿cuál podría ser el problema...?

Así que estaba tratando de hacer un botón que al hacer clic en él cambie su estilo y al hacer clic nuevamente cambie su estilo al original. Estoy muy cansada y mi cerebro funciona al 10%, me siento profundamente avergonzada de mi misma por no poder descifrarlo ya que ya lo he hecho un par de veces. Perdón por la pregunta estúpida, he estado leyendo en Google para ver cómo hacerlo. Solía hacerlo por mi cuenta sin buscar un método para hacerlo y sé que no es nada complicado, pero no sé por qué mi código. no funciona.............

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

Hay 2 errores aquí.

  1. Ha escrito mal background como bacground en la segunda instrucción if.
  2. Debe usar una declaración else if , de lo contrario, siempre detectará la segunda declaración if como correcta porque la primera la establece en "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

Por aquí

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