CSS样式Javascript
问题描述:
Im为网站提出问题,并希望var reltext中的正确/重试消息为不同的颜色,例如绿色表示正确,红色表示错误,也可能是每个旁边有一个小的png。CSS样式Javascript
有什么想法?
<form name = "Q1">
<p>A local construction company has purchased 5 brand new diggers. Two of them have a telescopic jib. If a driver chooses a digger to use at random what is the probability it will have a telescopic jib?<br>
0/5
<input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1a', '1')">
1/5
<input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1b', '2')">
2/5
<input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1c', '3')">
3/5
<input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1d','4')">
<br><br>
</p>
<div id = "para"><div>
</form>
<script type = "text/javascript">
var reltext = [];
reltext[1] = "TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib."
reltext[2] = "TRY AGAIN - 1/5 This would mean that there was only 1 digger with a telescopic jib"
reltext[3] = "CORRECT - 2/5 This would mean that there was 2 diggers with a telescopic jib"
reltext[4] = "TRY AGAIN - 3/5 This would mean that there was 3 diggers with a telescopic jib."
function getAnswer(ans, rel) {
document.getElementById("para").innerHTML = reltext[rel];
if (ans == "1c") {alert ("Correct - Well done!")}
else {alert ("Incorrect - Try again")}
}
</script>
答
你可以通过几种方式来做到这一点。
你可以用下面的更换你的reltext:
reltext[1] = "<div style='background-color:#dd0000;'>TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib.</div>"
reltext[2] = "<div style='background-color:#dd0000;'>TRY AGAIN - 1/5 This would mean that there was only 1 digger with a telescopic jib</div>"
reltext[3] = "<div style='background-color:#00dd00;'>CORRECT - 2/5 This would mean that there was 2 diggers with a telescopic jib</div>"
reltext[4] = "<div style='background-color:#dd0000;'>TRY AGAIN - 3/5 This would mean that there was 3 diggers with a telescopic jib.</div>"
2.或者你可以设定一个风格与id="para"
股利。喜欢的东西:
<style type="text/css">
.classWrong { bakcground-color: #dd0000; }
.classRight { background-color: #00dd00; }
</style>
,然后在你的脚本部分更改功能设置的样式:
function getAnswer(ans, rel) {
document.getElementById("para").innerHTML = reltext[rel];
if (ans == "1c") {
document.getElementById("para").className = "classRight";}
alert ("Correct - Well done!");
else {
document.getElementById("para").className = "classWrong";}
alert ("Incorrect - Try again")}
}
至于添加图像的响应只是一个img元素添加到你的reltext。也许喜欢:
reltext[1] = "<div style='background-color:#dd0000;'>TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib.<img src='images/Wrong.png' /></div>"
reltext[3] = "<div style='background-color:#00dd00;'>CORRECT - 2/5 This would mean that there was 2 diggers with a telescopic jib<img src='images/Right.png' /></div>"
还有很多其他的方法可以做到这一点,但我想我会只是它一展身手。
答
您可能无法使用JavaScript(或其他任何其他方式)设置警告框的内容。
一个很好的选择是使用像jQuery UI这样的框架,并使用模态对话框而不是JS警报。这里是jQuery UI对话框的链接:http://jqueryui.com/demos/dialog/
答
为了解决这个问题,在我看来,最简单的方法就是让2种格样式
例:
div.correct{
background-color: green;
}
div.wrong{
background-color: red;
}
使reltext多维数组,其中包含要么正确/错误的信息,例如:
reltext[1][0] = "correct"
reltext[1][1] = "CORRECT - That answer is correct"
reltext[2][0] = "wrong"
reltext[2][1] = "WRONG - This is wrong!"
reltext[3][0] = "wrong"
reltext[3][1] = "WRONG - BLaBlah.."
和修改的功能等:
function getAnswer(ans, rel) {
document.getElementById("para").innerHTML = reltext[rel][1];
document.getElementById("para").className = reltext[rel][0];
我可能会离开(我没有在编辑中看到它),但是你原来的问题没有说你想改变警报框中文本的样式? – 2012-03-23 12:31:08
起初是的,但我用“reltext”来显示我的正确/再试图像,再次感谢您的帮助! – Ma9ic 2012-03-27 13:01:45
将来,将此问题用作不应该做的示例。在事实发生混淆之后,如此激烈地改变你的问题,对那些试图提供帮助的人来说有点不妥。这很令人困惑,因为正确的答案不再正确(比如我的回答有6个upvotes),而且这是没有道理的,因为你通过改变问题来抢夺人们的正确答案。 – 2012-03-27 13:05:32