编写程序,实现单选题判断效果
时间: 2024-03-16 11:42:20 浏览: 45
以下是一个简单的单选题判断程序的示例代码:
HTML 代码:
```html
<h3>请选择正确的答案:</h3>
<ul>
<li>
<label>
<input type="radio" name="answer" value="A">
选项 A
</label>
</li>
<li>
<label>
<input type="radio" name="answer" value="B">
选项 B
</label>
</li>
<li>
<label>
<input type="radio" name="answer" value="C">
选项 C
</label>
</li>
<li>
<label>
<input type="radio" name="answer" value="D">
选项 D
</label>
</li>
</ul>
<button id="submit-answer">提交答案</button>
<div id="result"></div>
```
JavaScript 代码:
```javascript
var correctAnswer = "A"; // 正确答案
var submitButton = document.getElementById("submit-answer");
var resultDiv = document.getElementById("result");
submitButton.addEventListener("click", function() {
var selectedAnswer = document.querySelector('input[name="answer"]:checked');
if (!selectedAnswer) {
alert("请选择一个答案!");
return;
}
if (selectedAnswer.value === correctAnswer) {
resultDiv.innerHTML = "恭喜,你选择了正确的答案!";
} else {
resultDiv.innerHTML = "很遗憾,你选择了错误的答案!";
}
});
```
在上面的代码中,我们首先定义了正确的答案为 A。然后,我们通过 `document.getElementById()` 方法获取提交按钮和结果显示的 div 元素。接着,我们给提交按钮添加了一个点击事件的监听器。当用户点击提交按钮时,我们首先获取用户选择的答案,如果用户没有选择答案,则弹出提示框。如果用户选择了答案,则判断答案是否正确,根据判断结果在结果显示的 div 元素中显示相应的提示信息。
需要注意的是,上面的示例代码只是一个简单的单选题判断程序,实际应用中,我们还需要对用户输入的答案进行验证、对多个单选题进行循环判断等等,以保证程序的正确性和完整性。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)