Попытка показать оценку по простой HTML и JavaScript Общая информация

Question

Полностью новый для Javascript и jQuery. Я создаю эту викторину с Trivia с помощью HTML, CSS и Javascript/jQuery и столкнулся с проблемами.

Вот мой полный код - https://jsfiddle.net/CeeSt/8wLj1pk2/ для справки.

Вот отрывок из моего HTML и JS -

<div class="question">Question1? 
    <ul class="answers"> 
    <li><label><input name="Question0" id="correct" type="checkbox"> Answer1</label></li> 
    <li><label><input name="Question0" id="wrong" type="checkbox"> Answer2</label></li> 
    <li><label><input name="Question0" id="wrong" type="checkbox"> Answer3</label></li> 
    </ul> 
</div> 

JS файл -

var score = 0; 

function Results() { 
    if (document.getElementById("correct").checked === true) score++; 
    else (alert("Incorrect!")); 

} 

В частности, я пытаюсь иметь оценку общего отображаемые в некотором роде, и я в недоумении. Я знаю, что он признает «правильный» ответ, но показывая это, поскольку прогресс викторины - это то, с чем я борюсь. Я знаю, что есть лучший способ сделать это в чистом JavaScript, но если есть способ спасти этот метод, пожалуйста, помогите! Спасибо!!

Answer 1

Я согласен с используя переключатели и значение. Вы можете легко вычислить оценку следующим образом:

var score = $('input:checked[value=correct]').length 

Смотрите пример здесь: https://jsfiddle.net/wLxr3ooq/

Примечание: Если вы измените «значение» в «идентификатор» он все еще работает ... но вы должны избегать наличия повторяющихся идентификаторов

Answer 2

Вы не можете это сделать, используя свойство id. Однако вы можете использовать свойство value.

Затем вам необходимо изменить поле оценки. Я не думаю, что видел где-нибудь, где вы это сделали.

Answer 3

Вы должны преобразовать их в радио-кнопку, а затем оценить выбранную кнопку радио, чтобы проверить, является ли это правильно:

<div class="question">Question1? 
    <ul class="answers"> 
    <li><label><input name="Question0" value="correct" type="radio"> Answer1</label></li> 
    <li><label><input name="Question0" value="wrong" type="radio"> Answer2</label></li> 
    <li><label><input name="Question0" value="wrong" type="radio"> Answer3</label></li> 
    </ul> 
</div> 

и ваш JS будет выглядеть примерно так:

var score = 0; 

function Results() { 
    if ($("input[name=Question0]:checked").val() == "correct") { 
    score++; 
    } else { 
    alert("Incorrect!"); 
    } 
} 

Answer 4

Я думаю, проблема в том, что вы назначаете один и тот же идентификатор более чем одному элементу, что недопустимо. Вместо этого вы можете назначить им классы. Поэтому в вашем случае присвойте классу неправильный и класс правильный на соответствующие элементы. Затем, в вашем JavaScript, попробуйте следующий

var x = document.getElementsByClassName("correct"); 

Это будет захватывать все элементы с классом правильно и вернуть их в массив.