Блог

Я создаю простой тест на стороне клиента для самооценки.

Я задаю 6 вопросов и хочу предупредить пользователя об их оценке (сохраняя простоту). Если они оставляют ответ пустым, появится предупреждение.

Я новичок в javascript и на самом деле не знаю, как проверять отдельные элементы формы, чтобы увидеть, пусты ли они. У меня также возникли проблемы с запуском моего кода.

JS

Редактировать

 function grade() {
    var score = 0;
    var elt = document.quiz;

    // Check to see if no questions were left unanswered.
    if elt.question1.value.length == 0 || elt.question2.value.length == 0 ||   
       elt.question3.value.length == 0 || elt.question4.value.length == 0 ||
       elt.question5.value.length == 0 || elt.question6.value.length == 0
      {
        alert ("Whoops, you're missing an answer!")
    }

    if (elt.question1[1].checked) {
        score  = 1;
    }
    if (elt.question2[0].checked) {
        score  = 1;
    }
    if (elt.question3[0].checked == false amp;amp; elt.question3[1].checked amp;amp;  
        elt.question3[2].checked == false amp;amp; elt.question3[3].checked == false) {
        score  = 1;
    }
    if (elt.question4[0].checked == false amp;amp; elt.question4[1].checked == false amp;amp;
        elt.question4[2].checked == false amp;amp; elt.question4[3].checked) {
        score  = 1;
    }
    elt.question5 = elt.question5.toLowerCase()
    if (elt.question5.value != '' amp;amp; elt.question5.value.indexOf('galaxy') != -1) {
        score  = 1;
    }
    elt.question6 = elt.question6.toLowerCase()
    if (elt.question5.value != '' amp;amp; elt.question6.value.indexOf('age') != -1) {
        score  = 1;
    }

    score = score / 6 * 100;
    score = score.toFixed(2);
    alert("You scored "   score   "%");

    return false; // Return true if you want the form to submit on validation/grade
}
  

У вас есть некоторые существенные ошибки в вашей разметке:

1. Не обертывайте form элемент вокруг каждого вопроса. Все они должны быть в одном form элементе. (Кроме того, каждый вопрос должен быть в OL , чтобы пронумеровать вопрос последовательно.)
2. Вы неправильно закрываете все свои label , поэтому они выбирают другие элементы, когда вы нажимаете на них (попробуйте вопрос 3, первый флажок).
3. Вам нужна grade() функция в submit обработчике формы, и она должна быть onsubmit="return grade()" с grade() возвратом false , когда она не «проходит», чтобы предотвратить отправку формы *.

* Обратите внимание, в примере я установил для grade() функции значение всегда return false . Вам нужно будет добавить логику, когда это позволит форме отправлять.

Что касается Javascript…

Вам нужно, чтобы elt переменная была равна вашей document.quiz (обратите внимание, я изменил основную, form чтобы в вашей разметке было name="quiz" ). Вы можете использовать indexOf() вместо регулярного выражения, если вы просто хотите иметь простую проверку (хотя регулярное выражение можно проверять age как слово).

Если вы просто хотите убедиться, что вводимый текст не является пустым, вы можете использовать el.value.length != 0 или el.value != '' .

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

HTML

 <h3> Self-Grading Astronomy Quiz </h3>
<form action="" name="quiz" onsubmit="return grade();">
 <p>1. According to Kepler the orbit of the earth is a circle with the sun at the center.</p>
 <p>
  <label><input type="radio" name="question1" value="true" /> True </label>
  <label><input type="radio" name="question1" value="false" /> False </label>
 </p>
 <p>2. Ancient astronomers did consider the heliocentric model of the solar system but rejected it because they could not detect parallax.</p>
 <p>
  <label><input type="radio" name="question2" value="true" /> True </label>
  <label><input type="radio" name="question2" value="false" /> False </label>
 </p>
 <p>3. The total amount of energy that a star emits is directly related to its:</p>
 <p>
  <label><input type="checkbox" name="question3" value="1" /> a) surface gravity and magnetic field </label><br/>
  <label><input type="checkbox" name="question3" value="2" /> b) radius and temperature </label><br/>
  <label><input type="checkbox" name="question3" value="3" /> c) pressure and volume </label><br/>
  <label><input type="checkbox" name="question3" value="4" /> d) location and velocity </label>
 </p>
 <p>4. Stars that live the longest have:</p>
 <p>
  <label><input type="checkbox" name="question4" value="1" /> a) high mass </label><br/>
  <label><input type="checkbox" name="question4" value="2" /> b) high temperature </label><br/>
  <label><input type="checkbox" name="question4" value="3" /> c) lots of hydrogen </label><br/>
  <label><input type="checkbox" name="question4" value="4" /> d) small mass </label>
 </p>
 <p>5. A collection of a hundred billion stars, gas, and dust is called a __________.</p>
 <p>
  <input type='text' id='question5' />
 </p>
 <p>6. The inverse of the Hubble's constant is a measure of the __________ of the universe.</p>
 <p>
  <input type='text' id='question6' />
 </p>
 <p>
  <input type='button' onclick='grade()' value='Grade' />
 </p>
</form>
  

Javascript

 function grade() {
    //**Would I do something like this?
    //if(elem.value.length == 0){
    // alert("Whoops, looks like you didn't answer a question.")}
    var score = 0;
    var elt = document.quiz;

    if (elt.question1[1].checked) {
        score  = 1;
    }
    if (elt.question2[0].checked) {
        score  = 1;
    }
    if (elt.question3[0].checked == false amp;amp; elt.question3[1].checked amp;amp; elt.question3[2].checked == false amp;amp; elt.question3[3].checked == false) {
        score  = 1;
    }
    if (elt.question4[0].checked == false amp;amp; elt.question4[1].checked == false amp;amp; elt.question4[2].checked == false amp;amp; elt.question4[3].checked) {
        score  = 1;
    }
    if (elt.question5.value != '' amp;amp; elt.question5.value.indexOf('galaxy') != -1) {
        score  = 1;
    }
    if (elt.question5.value != '' amp;amp; elt.question6.value.indexOf('age') != -1) {
        score  = 1;
    }

    score = score / 6 * 100;
    score = score.toFixed(2);
    alert("You scored "   score   "%");

    return false; // Return true if you want the form to submit on validation/grade
}
  

http://jsfiddle.net/BeD3Z/10/

проверьте отдельные элементы формы, чтобы увидеть, пусты ли они

Вы просто сравниваете значение с пустой строкой:

 if(elt.question6.value == '') {
  alert('Unanswered');
}
  

Вы можете использовать jquerys, встроенный в проверкуhttp://docs.jquery.com/Plugins/validation. Он имеет встроенную функциональность для проверки наличия required и отображения сообщения об ошибке под пустым полем.