Question

我的思绪完全空白了。我有我提出的3个问题测验的布局。我只是想不出我需要使用的Javascript代码。一旦提交测验，它需要验证所有问题都有答案（我不想使用警报或提示说你没有这样或那样）。我想用它来突出红色或其他东西。在回答后，我希望它显示正确答案的数量。说我得到3分中的2分。它显示我有2对（我想使用innerHTML或appendChild）这是我如何设置它：

<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<meta charset="utf-8">

</head>
<body>

<form>
<p class="question1">1. Red and Blue gets what color?</p>
<ul class="answers">
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Green</label><br/>
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Purple</label><br/>
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Yellow</label><br/>
</ul>

<p class="question2">2. Trick or ?</p>
<input type="text" name="q2" value="treat" id="q2t">

<p class="question3">3. What is the best movie series of all time?</p>
<select>
    <option name="q3" id="q3hp" value="hp">Harry Potter</option>
    <option name="q3" id="q3twi" value="twi">Twilight</option>
    <option name="q3" id="q3star" value="star">Star Wars</option>
</select>
<br><br>
<button type="button" id="results">Submit Quiz</button>
</form>
<script>

</script>

</body>
</html>

只需要一些帮助

Answer 1

您可以使用

获取每个输入元素（q1，q2，q3）

document.getElementById()

然后，您可以使用value属性获取每个元素的值，并检查它是否为空（等于＆＃39;＆＃39;）。对于您找到的每个空元素，您可以通过创建css类并使用

将其添加到元素来添加红色边框

element.className +=' redWarning'

对于每个填好的问题，您可以检查它是否正确，并在正确的答案计数器中添加一个。最后你会得到一个id为元素的元素，它将包含正确的答案数，你将其innerHtml属性改为计数器，如此

document.getElementById('answersContainer').innerHTML = counter + ' right answers!'

Javascript测验验证

1 个答案: