表单在同一页面上显示结果+随机答案
form display results on same page + random answer
所以我有一个3个问题"你在测试什么职业"。。。选择并提交文本、radio和select后，结果将显示在它们旁边。文字和选择do，但不选择收音机。选择显示我是否将收音机设为if ((php.checked==false) && (asp.checked==false) && (js.checked==false)){rad.setAttribute("style", "display:inline");}。。。我的设置现在是文本显示，但收音机和选择不要。此外，我需要一个数组来保存解决方案，一旦提交了答案，它就会随机显示一个解决方案，比如"你是战士！"。这是一个PHP扩展。这是我的代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex 2</title>
<link href="styles.css" rel="stylesheet">
<script>
function checkForm(){
var chk = true;
var mName = document.getElementById("txtMeth");
var meth = document.getElementById("methMess");
var rad = document.getElementById("radMess");
var sel = document.getElementById("selMess");
var php = document.getElementById("a");
var asp = document.getElementById("b");
var js = document.getElementById("c");
var arr = document.getElementById("imp");
mName.style.backgroundColor="#fff";
meth.setAttribute("style", "display:none");
rad.setAttribute("style", "display:none");
sel.setAttribute("style", "display:none");
if (mName.value=='no'){
document.getElementById("methMess").innerHTML = "No";
meth.setAttribute("style", "display:inline");
chk = false;
}
if (mName.value=='yes'){
document.getElementById("methMess").innerHTML = "Yes";
meth.setAttribute("style", "display:inline");
chk = false;
}
if (php.value==A){
document.getElementById("radMess").innerHTML = "Healer";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (asp.value==B){
document.getElementById("radMess").innerHTML = "Dark";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (js.value==C){
document.getElementById("radMess").innerHTML = "One with the Elements";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (arr.value==1){
document.getElementById("selMess").innerHTML = "Rifle";
sel.setAttribute("style", "display:inline");
chk = false;
}
if (arr.value==2){
document.getElementById("selMess").innerHTML = "Bown and Arrow";
sel.setAttribute("style", "display:inline");
chk = false;
}
if (arr.value==3){
document.getElementById("selMess").innerHTML = "Daggers";
sel.setAttribute("style", "display:inline");
chk = false;
}
}
</script>
</head>
<body>
<div class="page">
<main role="main">
<article>
<div id="errMess" class="errMess">*Required Fields Missing</div>
<h1>What Guild Wars 2 Profession Are You</h1>
<div class="cssTable" style="margin-top:-25px;">
<form method="post">
<table>
<tr><td colspan="3"></td></tr>
<tr>
<td><div align="right">Do you like to do high damage?</div></td><td width="217">
<input id="txtMeth" name="txtMeth" type="text" size="25"></td><td ><div id="methMess" style="display:none"></div></td></tr>
<tr>
<td><div align="right">What best describes you?</div></td><td>
<input id="a" type="radio" name = "group1" value="A">Healer</input>
<input id="b" type="radio" name = "group1" value="B">Dark</input>
<input id="c" type="radio" name = "group1" value="C">Earthling</input>
</td><td><div id="radMess" style="display:none"></div></td>
</tr>
<tr>
<td>What weapon would you like to have?</td>
<td>
<select id="imp"><option value="0" selected="true">Select One</option>
<option value="1">Rifle</option>
<option value="2">Bow and Arrow</option>
<option value="3">Daggers</option></select>
</td><td><div id="selMess" style="display:none"></div></td>
</tr>
<tr><td colspan="3" align="right"><input type="button" class="styled-button-7" value="Send" onclick="checkForm()"/></td></tr></table></form></div></article>
</main></div>
</body>
</html>
就像这样，你的单选按钮总是有值"A"、"B"或"C"，这只是你在HTML中定义它们的方式。
应使用".checked"属性而不是通过值来检查单选按钮是否处于活动状态。
请看这里的js小提琴
我对你的代码所做的更改是：
我更新了你的if's
if (php.checked) {
document.getElementById("radMess").innerHTML = "Healer";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (asp.checked) {
document.getElementById("radMess").innerHTML = "Dark";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (js.checked) {
document.getElementById("radMess").innerHTML = "One with the Elements";
rad.setAttribute("style", "display:inline");
chk = false;
}
所以。。。我不得不重新命名所有的东西，因为我一直感到困惑。不要只是把它交上来或完全复制。。。你的老师可能会知道你没有这么做。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex 2</title>
<link href="styles.css" rel="stylesheet">
<style>td { height:25px }</style>
<script>
function checkForm() {
var high = document.getElementById('high'); // mName
var desc = document.getElementsByName('desc'); // group1
var weapon = document.getElementById('weapon'); // imp
// console.log(high);
// console.log(desc);
// console.log(weapon);
// get the checked radio button value to be used later
var desc_value;
for(var i=0; i<desc.length; i++){
if (desc[i].checked) desc_value = desc[i].value;
}
var error = false;
if (!high.value) {
// if you need to do validation for Yes/No, do it here
document.getElementById('errMess').innerHTML = 'high damage missing';
error = true;
}
else if (!desc_value) {
document.getElementById('errMess').innerHTML = 'desc missing';
error = true;
}
else if (!weapon.value) {
document.getElementById('errMess').innerHTML = 'weapon missing';
error = true;
}
if (!error) {
document.getElementById('errMess').innerHTML = '';
// do you like to do high damage?
high.style.background = '#fff';
high.style.display = 'none';
var highMess = document.getElementById('highMess');
highMess.innerHTML = high.value;
highMess.setAttribute('style', 'display:inline');
// what best describes you?
var desc_val;
var desc_msg = document.getElementById('descMsg');
desc_msg.setAttribute('style', 'display:inline');
desc_msg.innerHTML = desc_value;
for(var i=0; i<desc.length; i++){
// loop through the radio button group to hide the parent <span>
desc[i].parentNode.setAttribute('style', 'display:none');
}
// what weapon would you like to have?
weapon.style.display = 'none';
var weapon_val = weapon.options[weapon.selectedIndex].value;
var weapon_msg = document.getElementById('weaponMsg');
weapon_msg.innerHTML = weapon_val;
weapon_msg.setAttribute('style', 'display:inline');
}
}
</script>
</head>
<!-- this sets the selected option to being out of range (aka blank/empty) -->
<body onload="document.getElementById('weapon').selectedIndex = -1;">
<div class="page">
<main role='main'>
<article>
<div id='errMess' class='errMess' style='font-weight:bold; height:26px'></div>
<h1>What Guild Wars 2 profession are you.....?</h1>
<div class='cssTable' style='margin-top:-25px;'>
<form method='post'>
<table>
<tr><td colspan='3'></td></tr>
<tr>
<td><div align='right'>Do you like to do high damage?</div></td>
<td width='217px'><input id='high' name='high' type='text' size='25'/></td>
<td><div id='highMess' style='display:none'></div></td>
</tr>
<tr>
<td><div align='right'>What best describes you?</div></td>
<td>
<!-- i added spans outside of the <input/> so you could hide the text easily, too -->
<span><input id='healer' type='radio' name='desc' value='healer'>Healer</input></span>
<span><input id='dark' type='radio' name='desc' value='dark'>Dark</input></span>
<span><input id='earthling' type='radio' name='desc' value='earthling'>Earthling</input></span>
</td>
<td><div id='descMsg' style='display:none'></div></td>
</tr>
<tr>
<td>What weapon would you like to have?</td>
<td>
<select id='weapon' name='weapon'>
<option value='rifle'>Rifle</option>
<option value='bow_arrow'>Bow and Arrow</option>
<option value='daggers'>Daggers</option>
</select>
</td>
<td><div id='weaponMsg' style='display:none'></div></td>
</tr>
<tr>
<td colspan='3' align='right'><input type='button' class='styled-button-7' onClick='checkForm()' value='Submit'/></td>
</tr>
</table>
</form>
</div>
</div>
</article>
</main>
</body>
</html>
相关文章：
- for循环中的多个随机结果
- 用javascript添加变量作为随机生成的结果编号
- 随机侮辱生成器(随机化结果）
- Javascript - 从表单中获取复选框值并获取随机结果
- 将随机结果更改为序列
- 使用 AJAX 回调更新挖空可观察数组会生成随机排序的结果
- PHP无限滚动拉取随机结果
- 表单在同一页面上显示结果+随机答案
- 随机分配Dribble API调用结果
- 如何重复使用随机结果
- 防止随后的随机结果在Javascript中重复
- 从Javascript中的两个子数组中获取随机结果
- 使用CryptoJS解密文件会产生随机结果
- 从数组生成随机结果
- 在python "json"字符8192处随机插入逗号;从node.js调用的结果
- 我怎么能预测数学?随机的结果
- 试图从数组中获取随机图像，却得到了相同的结果
- 我如何使这只显示一个结果，并添加一个随机按钮
- JavaScript:if语句正在改变随机生成器的结果
- 如何使用javascript在一段时间间隔内从数组中获得随机结果
