+ 2
[Solved]How can I change background color of a div element using javascript?
I have a div element with id="div1". I am trying to change its background color using javascript. I tried: var div1=document.getElementById("div1"); div1.style.backgroundColor="#ffffff"; 👆👆👆It didn't work. I also tried: div1.style.backgroundColor="#ffffff"; But it didn't work Please help me out of it. Thanks in advance.🌝🌝
5 odpowiedzi
+ 2
Satyam, your code has several problems. It is good that you shared it.
- Like Maf mentioned, your JavaScript is looking for elements in the document before the document fully loads.
Code like this can address that problem:
var header;
var timeNav;
var alarmNav;
var swNav;
var space;
var undertab;
// After the document loads, assign values to each of the above variables.
// This is needed because document.getElementById('header') will return null or undefined if it runs before the id="header" element is loaded into the document.
document.addEventListener('DOMContentLoaded', function() {
header=document.getElementById("header");
timeNav=document.getElementById("timeNav");
alarmNav=document.getElementById("alarmNav");
swNav=document.getElementById("swNav");
space=document.getElementById("space");
undertab=document.getElementById("undertab");
});
- id should be unique within the document but you set 'space' to multiple different elements. Consider adding something like class="nav space" and in JavaScript looping through all matched elements. Right now your document.getElementById will only find 1 element and process that which appears different from what you want in HTML.
- your Dark Mode checkbox isn't linked to any JavaScript function so it doesn't do anything.
- It looks like you want to add a call to toTime like this too:
<div class="nav" id="timeNav" onclick="toTime()">Time</div>
On a side note, if adding inline styles with JavaScript isn't a requirement and all you want is these aesthetic changes, assign different CSS class names instead. I would set the classes on the body element. Let CSS define how CSS properties should change in '.dark-mode', '.time', '.alarm' or similar. This will let CSS do more of what it does best.
Some CSS like this can give your class="nav space" elements a specific background colour when 'dark-mode' class is set on your body element:
body.dark-mode .space {
background-color: #649664;
}
+ 4
Would you please attach the code? :)
+ 4
Satyam Mishra your code is totally fine. Problem is that script is loading before the DOM, to solve that, you can place the whole JS inside script tags in before ending body tag.
+ 3
That question contains code that really should work. Why do you say that they don't work?
I strongly suspect that your div is actually too small to see or that you don't know "#ffffff" is actually white which should look the same as the default background colour of a page.
I tested and got similar code to show the background colour using the following code in Sololearn's Code Playground:
JS:
document.addEventListener('DOMContentLoaded', function() {
var div1=document.getElementById("div1");
div1.style.backgroundColor="#ffff00"; // yellow
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="div1">Hello</div>
</body>
</html>
+ 2
It was just an example code.
Actually neither the id of Div is div1 nor I need to set its colour as white.
In my code, it's the header tag and I am creating a function to change its color
Html : line 8
Javascript : line 19
The function should run when you click Alarm div in webpage.... html:line-15
I attach my code here
https://code.sololearn.com/WkAJZ4P71hEp/?ref=app
Często masz takie pytania?
Ucz się bardziej efektywnie, za darmo:
Popularne dzisiaj
Help please?
4 Votes
Ejercicio Pytho
0 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Game development
0 Votes
Ruby programming?
3 Votes