单击按钮可更改文本和颜色 [英] Click button changes text and color
问题描述
我有一个带太阳的按钮。单击按钮时，它的文本必须更改为RAIN，屏幕的最低部分必须将其背景颜色更改为绿色。
因此，当SUN = > BC是绿色，而BC = RED
我尝试过：
< script language =JavaScripttype =text / javascript>
函数SunRain（）{
if（document.getElementById（'AanUitKnop'）。 innerHTML =='SUN'）{
document.getElementById（'AanUitKnop'）。innerHTML ='RAIN';
} else {
document.getElementById（'AanUitKnop'）。innerHTML ='SUN';
}
}
没关系，但改变颜色不会work
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
推荐答案
这是一个示例html我所做的参考： -
有一个div，其背景颜色根据按钮点击而变化。
只有不同之处在于我使用了锚标签而不是输入类型按钮。
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.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.
您能否尝试简单地设置backgroundColor如我在回答中提到的那样，像红色/绿色这样的字符串而不是像rgba（'41,171,235,0.25'）？
你也有这种情况保持像驼峰一样的财产如
'backgroundColor'而不是'backgroundcolor'c应该是大写字母。
Ex： -
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:-
document.getElementById('lowersection').style.backgroundColor = 'green';
我使用rgba进行了调整：
document.getElementById（'kleurbodem'）。style.back ground ='rgba（41,171,135,0.25）'
I did an adjustment for using rgba:
document.getElementById('kleurbodem').style.background = 'rgba(41,171,135,0.25)'
这篇关于单击按钮可更改文本和颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
