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>

来源

2012-03-21 Ma9ic

我可能会离开（我没有在编辑中看到它），但是你原来的问题没有说你想改变警报框中文本的样式？ – 2012-03-23 12:31:08

起初是的，但我用“reltext”来显示我的正确/再试图像，再次感谢您的帮助！ – Ma9ic 2012-03-27 13:01:45

将来，将此问题用作不应该做的示例。在事实发生混淆之后，如此激烈地改变你的问题，对那些试图提供帮助的人来说有点不妥。这很令人困惑，因为正确的答案不再正确（比如我的回答有6个upvotes），而且这是没有道理的，因为你通过改变问题来抢夺人们的正确答案。 – 2012-03-27 13:05:32

你可以通过几种方式来做到这一点。
你可以用下面的更换你的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>"

还有很多其他的方法可以做到这一点，但我想我会只是它一展身手。

来源

2012-03-21 14:55:06 CaptainBli

您可能无法使用JavaScript（或其他任何其他方式）设置警告框的内容。

一个很好的选择是使用像jQuery UI这样的框架，并使用模态对话框而不是JS警报。这里是jQuery UI对话框的链接：http://jqueryui.com/demos/dialog/

来源

2012-03-21 14:41:11

我一直希望能够使用，像是，

reltext [1] =“再试一次 - 0/5这意味着没有伸缩臂的挖掘机。”

– Ma9ic 2012-03-21 14:43:11

@ Ma9ic，不幸的是，这是不可能的。 – 2012-03-21 14:44:35

伟大的thxs！难怪我不知道该怎么做！在var rel中，我可以显示图像吗？ – Ma9ic 2012-03-21 14:46:00

为了解决这个问题，在我看来，最简单的方法就是让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-21 14:58:03 colthreepv

CSS样式Javascript

回答

reltext [1] =“再试一次 - 0/5这意味着没有伸缩臂的挖掘机。”

相关问题