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>Hay 2 errores aquí.
background como bacground en la segunda instrucción if.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>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>