Форма отображения результатов на той же странице + случайный ответ

Итак, у меня есть 3 вопроса «какая профессия вы викторины» ... и после того, как текст, радио и выбор выбраны и представлены, результаты должны показать рядом с ними. Текст и выберите, а не радио. Выбор показывает, если у меня есть радио, как, if ((php.checked==false) && (asp.checked==false) && (js.checked==false)){rad.setAttribute("style", "display:inline");} ... Как моя настройка теперь показывает текст, но радио и выберите dont. Также мне нужно иметь массив, содержащий решения, и как только ответы будут отправлены, он случайным образом отобразит решение, такое как «You're a Warrior!». И это расширение .PHP. Heres мой код:Форма отображения результатов на той же странице + случайный ответ

<!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>

источник

2014-10-10 Chad

'php.value === 'A' || asp.value === 'B' || js.value == 'C'' или вы определяете эти значения где-то еще? – Icepickle

это радио, var php id - «a», а его значение - «A». Это то, что вы имеете в виду? – Chad

отчасти, моя проблема здесь заключалась в том, что A, B, C не заключены в строку, вы используете их, как если бы они были определены в другом месте. Если вы хотите сравнить значение радиоблок со строковым значением «A», то также заключите их как таковые ... – Icepickle

Это так, что ваши кнопки радио всегда будет «A» Значения, «B» или «C», это просто, как вы определяете их в HTML.

Радиообъектив должен быть проверен для активного с использованием свойства «.checked», а не над значением.

Пожалуйста, смотрите js fiddle here

и изменения я внесенные в коду:

Я обновляю, если это

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; 
}

источник

2014-10-10 21:58:27 Icepickle

отлично, спасибо – Chad

Так ... Я должен был переименовать все, потому что я постоянно получаю смущенный. Не просто превратите это или скопируйте его точно ... ваш учитель, вероятно, узнает, что вы этого не сделали.

<!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>

источник

2014-10-10 22:54:23

Форма отображения результатов на той же странице + случайный ответ

ответ

Смежные вопросы