Button to change CSS settings-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>