Click button changes text and color

Question

1.60/5 (2 votes)

See more:

I have one button with "Sun" on it. When I click the button, it's text must change to "RAIN", and the lowest part of the screen must change it's backcolor to Green.

So, when SUN => BC is GREEN otherwhile BC = RED

What I have tried:

<script language="JavaScript" type="text/javascript">
function SunRain() {
if (document.getElementById('AanUitKnop').innerHTML == 'SUN') {
document.getElementById('AanUitKnop').innerHTML = 'RAIN';
} else {
document.getElementById('AanUitKnop').innerHTML = 'SUN';
}
}
That's ok, but changing color doesn't work

Posted 7-Jun-16 8:53am

Luc Baetsle

Updated 8-Jun-16 1:36am

Add a Solution

Comments

ZurdoDev 7-Jun-16 14:54pm

Why won't the color change?

SRS(The Coder) 7-Jun-16 14:54pm

Can you please share the html you are using?

Luc Baetsle 8-Jun-16 3:32am

Done, underneath

5 solutions

Solution 1

Here is a sample html what i have made for your reference:-

There is a div whose background color is varying as per the button click.
Only the difference is i have used an anchor tag rather than input of type button.

HTML

<html>
<head>
<script language="JavaScript" type="text/javascript">
function SunRain() {
	if (document.getElementById('AanUitKnop').innerHTML == 'SUN') {
		document.getElementById('AanUitKnop').innerHTML = 'RAIN';
		//document.body.style.background = 'red';
		document.getElementById('lowersection').style.background = 'red';
	} else {
		document.getElementById('AanUitKnop').innerHTML = 'SUN';
		//document.body.style.background = 'green';
		document.getElementById('lowersection').style.background = 'green';
	}
}
</script>
</head>
<body>
<a id="AanUitKnop" type="button" onclick="SunRain()" href="#">SUN</a>
<div id="lowersection" style="height:500px;width:500px;"></div>
</body>
</html>

Hope this will definitely of help to you.

Posted 7-Jun-16 9:17am

SRS(The Coder)

Comments

Sergey Alexandrovich Kryukov 7-Jun-16 16:17pm

Correct, a 5.
I also described the alternatives based on using CSS classes or all style properties at once; please see Solution 2.
—SA

Luc Baetsle 8-Jun-16 3:31am

I tried, but color is not changing. I put whole HTML / CSS / Javascript. Problem is in HTML where <!-- Skeleton and Shadow is mentioned

Thanks

Solution 5

I did an adjustment for using rgba:
document.getElementById('kleurbodem').style.background = 'rgba(41,171,135,0.25)'

Posted 8-Jun-16 0:49am

Luc Baetsle

Solution 6

JavaScript

document.getElementById('lowersection').style.background = 'green';

for changing background color

Posted 8-Jun-16 1:36am

Vijay Dodmani

Solution 2

In addition to Solution 1:

Very often, it's a better idea to add or remove a whole CSS class to the element in question. Then the style detail can be moved to those classes. Please see:
Element.classList — Web APIs | MDN.

Please see the functions .remove, .add and .toggle in the description of the Element.classList object and the code sample provided.

Another option is to use the property .cssText of the object HTMLElement.style:
HTMLElement.style — Web APIs | MDN.

See also the code sample provided. It also allows the definition of all style elements at once.

—SA

Posted 7-Jun-16 10:16am

Sergey Alexandrovich Kryukov

Updated 7-Jun-16 19:32pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

SRS(The Coder) · Accepted Answer · 2016-06-07T21:50:00

Solution 4

Can you please try simply setting backgroundColor to a string like "red"/"green" rather than like rgba('41,171,235,0.25') as i mentioned in my answer?

Also the case you have to maintain as camel case for property like
'backgroundColor' not 'backgroundcolor' c should be in capital letter.

Ex:-

JavaScript

document.getElementById('lowersection').style.backgroundColor = 'green';

Posted 7-Jun-16 21:50pm

SRS(The Coder)

Comments

Luc Baetsle 8-Jun-16 4:12am

Yes, it's changing color, but I need the rgba color, it's like olive green. Why is the zindex not working ?

SRS(The Coder) 8-Jun-16 4:41am

You can use hexa code for this purpose, for olive green it is "#556B2F". So you can write like below:-

document.getElementById('lowersection').style.backgroundColor = '#556B2F';

You can get all color hexa codes from this reference site:
http://www.color-hex.com/