changing the background color on clicking on the button

Question

I'm learning javascript!

What I need to do, is to change the background-color at the same time when the image is changing by clicking on the button.

Changing the picture, from light-On to light-off, is working properly, the only problem is that the color of the background of my html page, is not changing.

  function colorize() {
            var element = document.getElementById("azul");
            element.style.backgroundColor = 'blue';
            element.style.color = "yellow";
        }

    html{
         background:
             grey;
     }
     #azul:focus {
         background: blue;
        
     }

    <div id="branca">
        <h1>LOI Lampen aanzetten en uitzetten</h1>
        <button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG'">Turn on the light</button>
        

        <img id="myImage" src="img/393533_01.PNG" class="mudar">
        <div id="yellow">
            <button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
        </div>
    </div>

you can use `document.body.backgroundColor = 'white'` – Get Off My Lawn May 30 '18 at 19:58 — Get Off My Lawn, May 30 '18 at 19:58
You are changing the background of the button – Luca Kiebel May 30 '18 at 19:58 — Luca Kiebel, May 30 '18 at 19:58
You are not calling the colorize function anywhere. – Mr Lister May 30 '18 at 20:03 — Mr Lister, May 30 '18 at 20:03

score 0 · Answer 1 · answered May 30 '18 at 20:02

You want to change background of html so what you have to do is...

function colorize() {
     var element = document.getElementsByTagName("html")[0];
     element.style.backgroundColor = 'blue';
}

You were taking button element and changing its color. you have to select html tag as you want to change the background-clor property assigned to it via css.

score 0 · Answer 2 · answered May 30 '18 at 20:10

This is your solution call the colorize function too

<html>

<script>
function colorize() {
  var element = document.getElementsByTagName("html")[0];
  element.style.backgroundColor = 'blue';
  element.style.color = "yellow";
}
</script>

<style>
html{
background:
   grey;
}
#azul:focus {
background: blue;

}
</style>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG';colorize()">Turn on the light</button>


<img id="myImage" src="img/393533_01.PNG" class="mudar">
<div id="yellow">
  <button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
</div>
</div>

</html>

Scott Marcus · Answer 3 · 2018-05-30T20:25:25.237

You need to change the background color of the document, not element, which is your button.

Since you are new to JavaScript, let's get you off of some bad habits that you've already picked up.

Do not set up event handlers via HTML event attributes (i.e. onclick, onmouseover, etc.). This is a 25+ year old technique that we used before we had modern standards and best practices and because it's easy to use, people keep using it. But there are a variety of reasons why you should not use this technique and instead separate your JavaScript from your HTML. Instead, keep your JavaScript separate and use .addEventListener() to hook up your elements to their respective callback functions.

Whenever possible, work with pre-made CSS classes because these are easier to manage and reuse than inline CSS styles (via the .style property). You can then easily use the element.classList API to add or remove classes as needed.

See the comments inline below:

// Get references to the elements you'll need to work with
let targetImage = document.getElementById('myImage');
let btnOn = document.getElementById("on");
let btnOff = document.getElementById("off");

// Then, set up your event handlers in JavaScript, not HTML
btnOn.addEventListener("click", changeImage);
btnOff.addEventListener("click", changeImage);

function changeImage(){
  // Set the target's source to the data-source attribute for the clicked button 
  targetImage.src = this.dataset.source; 
  targetImage.alt = this.dataset.alt // Now update the alt attribute
  
  // Change the background color of the page by adding or removing a
  // pre-made class to/from the body based on the button that was clicked
  
  // Since this is a simple if/then scenario, we can use the JavaScript "ternary" operator
  // which works like this:   some condition ? what to do if condition is true : what to do if false
  this.id === "on" ? document.body.classList.add("blue") : document.body.classList.remove("blue"); 
}

body { background-color: grey; } /* Style the body, not the HTML */ 
#on:focus { background: blue; color:yellow; }
.blue { background-color:aliceblue; } /* This will be added when on is clicked */


/* Just for this example only */
img { width:100px; }

<button id="on" data-source='https://cdn.wccftech.com/wp-content/uploads/2015/04/bulb_PNG1250.png' data-alt="On Image">Turn on the light</button>
<button id="off" data-source='https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg' data-alt="Off Image">Turn off the light</button>

<div>
  <!-- <img> elements must have an alt attribute to be valid -->
  <img id="myImage" src="https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg" class="mudar" alt="default image">
</div>

Leonid Z · Answer 4 · 2018-05-30T20:41:43.337

Here is your code:

<style>
    body {
        background: grey;
    }
</style>

<script>
        function colorize(light) {
            if (light) {
                document.getElementById('myImage').src = '/img/393533_02.PNG';
                document.body.style.background = 'grey';
            }
            else {
                document.getElementById('myImage').src = '/img/393533_01.PNG'
                document.body.style.background = 'blue';
            }
        }
    </script>

<body>
    <div id="branca">
        <h1>LOI Lampen aanzetten en uitzetten</h1>
        <button id="azul" onclick="colorize(true)">Turn on the light</button>
        <img id="myImage" src="img/393533_01.PNG" class="mudar"/>
        <div id="yellow">
            <button onclick="colorize(false)">Turn off the light</button>
        </div>
    </div>
</body>

Now in colorize function you can write as much parameters as you want for two different conditions.

changing the background color on clicking on the button

4 Answers4