CODEWITHSUNDEEP
javascripthtmlcssbackground-color
Dale Wemyss
Dale Wemyss

Reputation: 87

Trying to change background color with variable

Trying to change color using a variable, console works but color not changing when I click on the square.

Color is the variable I want to use.

I have tried an actual string value and that does not work.

<!DOCTYPE html>

<html>
    <head>
        <link href="main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <h1>Test Your Reactions!</h1>
        <p>Click on the shapes as fast as you can</p>

        <div id="shapes">

        </div>
        <script>

            function myFunction() {

                var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));

            document.getElementById("shapes").style.backgroundColour = colour;
            console.log(colour);
            }

        </script>
    </body>
</html>

Upvotes: 0

Views: 2535

Answers (4)

jawahar N
jawahar N

Reputation: 482

Below code gives the expected result. please take it.

<!DOCTYPE html>

<html>
    <head>
        <link href="main.css" rel="stylesheet" type="text/css"/>
        <style> 
            #shapes {
                width: 300px;
                height: 300px;
                background-color: coral;
                color: white;
            }
        </style>
    </head>
    <body>
        <h1>Test Your Reactions!</h1>
        <p>Click on the shapes as fast as you can</p>

        <div id="shapes" onClick="myFunction();">
            test
        </div>
        <script>

            function myFunction() {
                var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
                document.getElementById("shapes").style.backgroundColor = colour;
                console.log(colour);
            }

        </script>
    </body>
</html>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You need to replace backgroundColour by backgroundColor without u :

document.getElementById("shapes").style.backgroundColour = colour;
______________________________________________________^

Must be :

document.getElementById("shapes").style.backgroundColor = colour;

NOTE 1: You need to trigger the function to see the effect and you must also give your target div shapes a width/height so you can see it.

NOTE 2: You must listen on DOMContentLoaded event to make sure all the elements are loaded to the DOM before calling your script.

Working sample:

<!DOCTYPE html>

<html>

<head>
  <link href="main.css" rel="stylesheet" type="text/css" />
  <style>
    #shapes {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <h1>Test Your Reactions!</h1>
  <p>Click on the shapes as fast as you can</p>
  <div id="shapes">

  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var shapes = document.getElementById("shapes");
      shapes.addEventListener('click', myFunction, false);
    });

    function myFunction() {
      shapes.style.backgroundColor = "#" + (Math.random() * (1 << 24) | 0).toString(16).slice(-6);
    }
  </script>
</body>

</html>

Upvotes: 1

Damian Peralta
Damian Peralta

Reputation: 1866

Try this

const shapes = document.getElementById("shapes"); // You declare once, then you can reuse

function myFunction() {
  var colour = '#'+((Math.random() *(1<<24)|0).toString(16).slice(-6));
  shapes.style.backgroundColor = colour;
  console.log(colour);
}
shapes.addEventListener('click', myFunction); // I guess you want to click somewhere
<h1>Test Your Reactions!</h1>
  <p>Click on the shapes as fast as you can</p>
<div id="shapes">Shapes</div>

Upvotes: 0

ashish singh
ashish singh

Reputation: 6904

its backgroundColor not Colour .. you have an extra u

Upvotes: 1

Related Questions