Trying to change background color with variable

Question

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>

backgroundColour we do not use that spelling for color in JavaScript. — epascarello
– epascarello, Commented Sep 27, 2018 at 17:55

ashish singh · Accepted Answer · 2018-09-27 17:38:32Z

1

its backgroundColor not Colour .. you have an extra u

answered Sep 27, 2018 at 17:38

ashish singh

6,9142 gold badges18 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dale Wemyss Over a year ago

Thanks, stupid error with English spelling. Don't know why Netbeans was not complaining about misspelled css property?

Zakaria Acharki · Accepted Answer · 2018-09-27 17:50:39Z

1

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>

edited Sep 27, 2018 at 17:50

answered Sep 27, 2018 at 17:38

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

2 Comments

Zakaria Acharki Over a year ago

Congratulation, you've earned the VoteUp privilege consider to use it ;)

Dale Wemyss Over a year ago

Sorry I cut out the surrounding onclick function document.getElementById("shapes").onclick = function(){} and if you add javascript at the end just before closing body all content is already loaded. But thanks for your answer.

Damian Peralta · Accepted Answer · 2018-09-27 17:47:02Z

0

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>

answered Sep 27, 2018 at 17:47

Damian Peralta

1,8969 silver badges12 bronze badges

Comments

jawahar N · Accepted Answer · 2018-09-27 17:53:24Z

0

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>

answered Sep 27, 2018 at 17:53

jawahar N

4722 silver badges13 bronze badges

1 Comment

Dale Wemyss Over a year ago

Would it not be better to add onclick in the JavaScript rather than inbed it in the html? document.getElementById("shapes").onclick = function(){}

Collectives™ on Stack Overflow

Trying to change background color with variable

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related