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>
4 answers
solution1
0 2018-05-30 20:02:31
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.
solution2
0 2018-05-30 20:10:39
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>
solution3
0 2018-05-30 20:11:57
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 (ie 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>
solution4
0 2018-05-30 20:35:48
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.