Click here to Skip to main content
15,917,795 members
Please Sign up or sign in to vote.
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
Updated 8-Jun-16 1:36am
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

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.
 
Share this answer
 
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
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';
 
Share this answer
 
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/
I did an adjustment for using rgba:
document.getElementById('kleurbodem').style.background = 'rgba(41,171,135,0.25)'
 
Share this answer
 
JavaScript
document.getElementById('lowersection').style.background = 'green';
for changing background color
 
Share this answer
 
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
 
Share this answer
 
v2

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900