const quizForm = document.getElementById('quiz-form');const resultDiv = document.getElementById('result');const quizData = [ { question: "你喜欢在人多的场合中吗?", a: "是", b: "否", }, { question: "你更喜欢独处还是与他人相处?", a: "独处", b: "与他人相处", }, { question: "你喜欢计划好你的时间吗?", a: "是", b: "否", },];function showResults() { let score = 0; const answers = quizForm.querySelectorAll('input:checked'); answers.forEach(answer => { if (answer.value === 'a') { score++; } }); resultDiv.innerHTML = `你的得分为:${score}`;}function loadQuiz() { const quizHTML = quizData.map((data, index) => { return ` <div class="question"> <p>${index + 1}. ${data.question}</p> <label><input type="radio" name="q${index+1}" value="a">${data.a}</label> <label><input type="radio" name="q${index+1}" value="b">${data.b}</label> </div> `; }).join(''); quizForm.innerHTML = quizHTML;}loadQuiz();quizForm.addEventListener('submit', (event) => { event.preventDefault(); showResults();});
时间: 2023-07-19 09:34:10 浏览: 55
这段JS代码主要实现了一个简单的Web Quiz应用,它包含以下几个部分:
1. 定义了一个quizData数组,其中包含了三个问题,每个问题都有两个选项。
2. 定义了两个变量quizForm和resultDiv,分别用于获取HTML中的表单和结果div元素。
3. 定义了showResults()函数,用于计算用户的得分,并将结果显示在页面上。
4. 定义了loadQuiz()函数,用于动态生成问题和选项的HTML,并将其插入到页面中。
5. 注册了表单的submit事件监听器,当用户提交表单后,阻止表单默认的提交行为,并调用showResults()函数计算并显示结果。
具体实现细节可以参考代码注释。
相关问题
const element = document.getElementById('pdf-container')会报错Cannot read property 'getElementById' of undefined
这个错误可能是因为你在浏览器端的 JavaScript 代码中使用了 DOM API,但是代码执行时并没有找到对应的文档对象。一种可能的原因是代码执行的时机不对,可能需要等到 DOM 加载完成后再执行相关代码。
你可以尝试将代码放到下面这个事件监听函数中:
```
window.addEventListener('DOMContentLoaded', function() {
// 在这里执行相关代码
});
```
或者使用 jQuery 等库中提供的 ready 函数:
```
$(document).ready(function() {
// 在这里执行相关代码
});
```
这样可以确保代码执行时 DOM 已经加载完毕,可以安全地使用 DOM API。同时,也可以检查一下是否正确引入了相关的 JS 文件。
const timePicker = document.getElementById('time'); timePicker.addEventListener('change', (event) => { const selectedTime = event.target.value; console.log(`Selected time: ${selectedTime}`); });怎么获取秒
如果你想获取用户选择的时间中的秒数,可以使用 JavaScript 的 `Date` 对象。具体来说,可以将用户选择的时间值转换为 `Date` 对象,然后通过 `getSeconds()` 方法获取秒数。
下面是修改后的代码示例:
```javascript
const timePicker = document.getElementById('time');
timePicker.addEventListener('change', (event) => {
const selectedTime = event.target.value;
const date = new Date(selectedTime);
const seconds = date.getSeconds();
console.log(`Selected time: ${selectedTime}, seconds: ${seconds}`);
});
```
在这个示例中,我们将用户选择的时间值 `selectedTime` 转换为 `Date` 对象 `date`,然后通过 `getSeconds()` 方法获取秒数并保存在 `seconds` 变量中。最后,我们在控制台输出用户选择的时间和秒数。
需要注意的是,`getSeconds()` 方法返回的是当前时间的秒数,而不是从 `selectedTime` 中获取的秒数。如果你需要从用户选择的时间中获取秒数,可以使用 `date.getSeconds()` 来代替。