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這意味着沒有伸縮臂的挖掘機。」

相關問題