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>
<head>
<script language="JavaScript" type="text/javascript">
function SunRain() {
if (document.getElementById('AanUitKnop').innerHTML == 'SUN') {
document.getElementById('AanUitKnop').innerHTML = 'RAIN';
document.getElementById('lowersection').style.background = 'red';
} else {
document.getElementById('AanUitKnop').innerHTML = 'SUN';
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.