I want to create a button to change color property from the ball in the game. In CSS text #character, property backgroundcolor.
Here is the code. I really would appreciate if someone could help me.
#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>You are using the wrong style property, instead of using style.color, use style.background
Here is a working example:
#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>Since initially you are setting the background color of the circle to red, you need to change this property, instead of changing the color property
#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>