How do I change the div color in JS?

JavaScript
1

I am populating my h1 id-categoryOutput with a word from a JS database, Taffy DB. (The word is the name of the selected category.) That h1 is wrapped in a div id=banner to provide a gray banner background. I want to style that div a different color based on the category word in h1. See the HTML here:

<div id="banner" class="rowgr pad2 cen grayed">
    <h1 id="categoryOutput"></h1>
</div>

I am adding 2 lines to change the color of the div this way, but the div still remains unchanged:

	 db({category:show}).each(function (name){ 
		var category = name.category;
		var sendOutput = document.getElementById('categoryOutput');
		var banner = document.getElementById('banner');
		banner.innerHTML = "banner.style='backgroundcolor:yellow'";
		sendOutput.innerHTML = "" + category;
	});

Error in console: “Uncaught TypeError: Cannot set property ‘innerHTML’ of null”

Not sure how to do it differently.

2

Use:
banner.style.backgroundColor = "yellow";

Reference:
https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp

3

I’m sure that would work, but it won’t show because of the above error. Not sure what other order to put the lines in. If I put the lines in near the bottom of the code, it replaces the category name in h1. I think the problem is in the syntax of

banner.innerHTML = "banner.style.backgroundColor = 'yellow'";

So I tried:

var banner = document.getElementById('banner');
		banner.style.backgroundColor.innerHTML = "yellow";

That gave me the error:
Uncaught TypeError: Cannot create property 'innerHTML' on string ''

4

This seems a bit flawed to me. An id is unique and document.getElementById('banner') will return the one banner element.

if db({category:show}) has say 10 categories, then you are trying to set that same banner’s background colour to yellow 10 times.

Apart from that to avoid setting an inline style could you create a class in css instead?

.yellow-bg {
  backgroundColor: yellow
}

then

document.getElementById('banner')
  .classList.replace('grayed', 'yellow-bg')
2 Likes
5

In my css page I have:

.grayed {
    background-color: #ddd;
}

.bg-general {
    background-color: #yellow;
}

.bg-electrical {
    background-color: #green;
}

To the js page I changed to:

 db({category:show}).each(function (name){ 
		var category = name.category;
		var sendOutput = document.getElementById('categoryOutput');
		sendOutput.innerHTML = "" + category;
		// Set div color
		if (category="General") {
		document.getElementById('banner')
  .classList.replace('grayed', 'bg-general')}
		else if (category="Electrical") {
		document.getElementById('banner')
  .classList.replace('grayed', 'bg-electrical')}

Unfortunately, the color goes white no matter which category I choose.

6

Your css is wrong, no hashes before the named colours.

.grayed {
    background-color: #ddd;
}

.bg-general {
    background-color: #yellow;
}

.bg-electrical {
    background-color: #green;
}

should be

.grayed {
    background-color: #ddd;
}

.bg-general {
    background-color: yellow;
}

.bg-electrical {
    background-color: green;
}
2 Likes
7

Hash yellow is not a valid css color? It’s just yellow without the hash.

Oops too slow :slight_smile:

1 Like
8

Thanks for the corrections. Unfortunately, only yellow is displayed, no matter which of the two categories I chose.

9

I saw you typing lol.

1 Like
11

if (category="General") should be if (category === "General")

the same for Electrical.
= is assignment e.g. x = 5 // x is 5
=== is a comparison e.g. x === 5 // does x equal 5

2 Likes
12

That is it! Now it all works. I can’t believe I made so many newbie mistakes. Just haven’t been coding in JS for quite a while. Thanks.

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.