He estado tratando de codificar una extensión de juego de serpientes por diversión y me he encontrado con algunos problemas, los botones programados en mi extensión no funcionan. No puedo hacer clic en ellos y no he encontrado un tutorial que pueda ayudarme. No estoy seguro de si soy estúpido y los botones no se pueden usar en extensiones, pero si lo son, mi código debe ser el problema.
Este es mi código HTML si ayuda:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/css/button.css"> <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>Google Snake</title> <style> body{ margin: 0px; padding: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; } canvas{ box-shadow: black 20px 10px 50px; } </style> </head> <body> <h1>Snake</h1> <button onclick="doSomething()">Restart</button> <p id="test">Hello</p> <script> function doSomething(){ document.getElementById("test").innerHTML = "Goodbye"; } </script> <script src="/js/index.js"></script> <canvas id="game" width="400" height="400"></canvas> </body> </html>Probé tu código y tu botón funcionó . Al no funcionar, si quiere decir que no puede volver a cambiar el adiós por el hola , necesita escribir otra función para hacerlo a la inversa. Cambié tu guión, échale un vistazo. Es una forma de hacerlo, por supuesto si esta era tu pregunta.
function doSomething() { if (document.querySelector("p").innerHTML === "Hello") { document.querySelector("p").innerHTML = "Goodbye"; } else { document.querySelector("p").innerHTML = "Hello"; } } body { margin: 0px; padding: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; } canvas { box-shadow: black 20px 10px 50px; } </style <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/css/button.css"> <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>Google Snake</title> </head> <body> <h1>Snake</h1> <button onclick="doSomething()">Restart</button> <p>Hello</p> <script src="/js/index.js"></script> <canvas id="game" width="400" height="400"></canvas> </body> </html>