CSS Style Javascript
CSS Style Javascript
Im正在为网站提问,并希望var reltext中的正确/重试消息是不同的颜色,即绿色表示正确,红色表示错误,每个旁边可能都有一个小png。
有什么想法吗?
<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>
您可能不会使用JavaScript(或其他任何相关内容)对警报框的内容进行样式设置。
一个好的替代方案是使用像jQueryUI这样的框架,并使用模态对话框而不是JS警报。以下是jQuery UI对话框的链接:http://jqueryui.com/demos/dialog/
您可以通过多种方式来实现这一点
1。您可以将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"
为div设置一个样式。类似于:
<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")}
}
3.至于向响应中添加图像,只需在reltext中添加img元素即可。可能类似于:
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>"
有很多其他方法可以做到这一点,但我想我会尝试一下。
在我看来,要解决这个问题,最简单的方法是制作两个div样式的
例如:
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];
相关文章:
- Javascript style.background在IE中不起作用
- javascript无法读取属性'style'为null
- JavaScript中的style.clip会随着时间的推移而变化
- Javascript if statement if (ball.style.left === '0px'
- style.visibility='隐藏'在JavaScript中不起作用
- Javascript错误文档.getElementById('x').style.display=
- 通过一个按钮JAVASCRIPT更改style.display在多个对象上的显示
- 如何从javascript访问html的STYLE标记中的class属性
- 在 javascript 中更改图像 .style 仅适用于 Firefox
- Java-style Set collection for Javascript
- Javascript element.style.backgroundImage 未加载图像
- Javascript queryselector.style.modify "uncaught TypeErr
- Javascript style.left 是空字符串
- Javascript style.display在VS2012中未保持更改
- Javascript - style.left 将更新减法,但不更新加法
- JQuery css() and JavaScript style
- Javascript style.display带走了
- 项目符号
- javascript style "alert('test');"在Linux桌面使
- Javascript .style在文档中.createElement不工作
- Javascript: style.display: & # 39;块# 39;并# 39;t工作