Quiero crear un botón para cambiar la propiedad de color de la pelota en el juego. En el texto CSS #character, propiedad backgroundcolor.
Aquí está el código. Realmente agradecería si alguien pudiera ayudarme.
#character { width: 20px; height: 20px; background-color: red; /* I want to change this property */ position: absolute; top: 100px; border-radius: 50%; } <body> <div id="game"> <div id="block"></div> <div id="hole"></div> <div id="character"></div> </div> <button type="button" onclick="document.getElementById('character').style.color = 'blue'"> Click Me!</button> </body>Está utilizando la propiedad de estilo incorrecta, en lugar de usar style.color , use style.background
Aquí hay un ejemplo de trabajo:
#character{ /* Definições da bola */ width: 20px; height: 20px; background-color: red; /* I want to change this property */ position: absolute; top: 100px; border-radius: 50%; } <!DOCTYPE html> <html> <head> <!-- Head do jogo --> <meta charset="UTF-8"> <title>Flappy Bird</title> <link rel="stylesheet" href="flappybird_style.css"> </head> <body> <!-- Corpo do jogo --> <div id="game"> <!-- Divs que representam cada parte do jogo --> <div id="block"></div> <div id="hole"></div> <div id="character"></div> </div> <button type="button" onclick="document.getElementById('character').style.background = 'blue'"> Click Me!</button> </body> <script src="script.js"> </script> </html>Dado que inicialmente está configurando el color de fondo del círculo en rojo, debe cambiar esta propiedad, en lugar de cambiar la propiedad de color .
#character { width: 20px; height: 20px; background-color: red; /* I want to change this property */ position: absolute; top: 100px; border-radius: 50%; } <div id="game"> <!-- Divs que representam cada parte do jogo --> <div id="block"></div> <div id="hole"></div> <div id="character"></div> </div> <button type="button" onclick="document.getElementById('character').style.backgroundColor = 'blue'"> Click Me!</button>