javascript - 如何在 JavaScript 中访问 HTML 单选的值
问题描述
我正在尝试使用 HTML 收音机和 javascript 为网站制作一个简单的问卷。我正在尝试从我在以下行中实现的单选按钮访问值:
<body>
<form class="questionForm" id="q1" data-question="1">
<div>
<p>Question 1</p>
<p><input type="radio" value="a">A. Rustgeving</p>
<p><input type="radio" value="b">B. Zingeving</p>
<p><input type="radio" value="c">C. Duurzaamheid</p>
<p><input type="radio" value="d">D. Verzuiling</p>
<p><input type="radio" value="e">E. Zorgzaamheid</p>
</div>
<input id="button" type="button" value="Volgende" onclick="check()">
</form>
... et
我特别希望能够在我的 JavaScript 中操作/存储这些值(这样我就可以计算/平均答案分数)。我知道点击事件运行“检查”功能,我应该能够访问这些值,但我找不到确切的方法。目前我正在尝试以下方法:
function check() {
var q1 = document.q1.value
document.write(q1)
}
这里的 document.write() 用作调试目的,这样我就可以看到我是否得到了 / 正确的值。目前没有返回任何内容。你能帮助我吗?
编辑:
它按照您的建议工作(放置 document.write(rb.value) 显示您选择的字母。但我的字典没有保存增量。我怎样才能制作代码以便在最后显示您选择的答案?例如; AABDC
完整的javascript:
const button = document.querySelector("#button")
button.addEventListener("click", e => {
const rb = document.querySelector('input[name="_exam_"]:checked');
//document.write(rb.value);
dict("rb.value") = dict("rb.value") + 1;
})
//changes the a to 0
var dict = {
"a": 0,
"b": 0,
"c": 0,
"d": 0,
"e": 0,
};
$(document).ready(function () {
//hide all questions
$('.questionForm').hide();
$('#results').hide();
//show first question
$('#q1').show();
$('#q1 #button').click(function () {
$('.questionForm').hide();
$('#q2').show();
return false;
});
$('#q2 #button').click(function () {
$('.questionForm').hide();
$('#q3').show();
return false;
});
$('#q3 #button').click(function () {
$('.questionForm').hide();
$('#q4').show();
return false;
});
$('#q4 #button').click(function () {
$('.questionForm').hide();
$('#q5').show();
return false;
});
$('#q5 #button').click(function () {
$('.questionForm').hide();
$('#results').show();
//document.write('0');
return false;
});
});
和我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="STYLE.CSS">
<title>Document</title>
</head>
<body>
<form class="questionForm" id="q1" data-question="1">
<div>
<p>Question 1</p>
<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
<p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
<p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
<p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
<p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
</div>
<input id="button" type="button" value="Volgende">
</form>
<form class="questionForm" id="q2" data-question="2">
<div>
<p>Question 2</p>
<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
<p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
<p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
<p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
<p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
</div>
<input id="button" type="button" value="Volgende">
</form>
<form class="questionForm" id="q3" data-question="3">
<div>
<p>Question 3</p>
<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
<p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
<p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
<p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
<p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
</div>
<input id="button" type="button" value="Volgende">
</form>
<form class="questionForm" id="q4" data-question="4">
<div>
<p>Question 4</p>
<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
<p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
<p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
<p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
<p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
</div>
<input id="button" type="button" value="Volgende">
</form>
<form class="questionForm" id="q5" data-question="5">
<div>
<p>Question 5</p>
<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
<p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
<p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
<p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
<p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
</div>
<input id="button" type="button" value="Volgende">
</form>
<form class="questionForm" id="results" data-question="6">
<p> here are your results</p>
</form>
</div>
<script src="jquery.js"></script>
<script src="quiz.js"></script>
</body>
</html>
解决方案
1)您应该在每个上添加name
属性radio button
:
<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
2)您可以将checked
单选按钮的值设为
const rb = document.querySelector( 'input[name="_exam_"]:checked' );
console.log( rb.value );
const button = document.querySelector("#button")
button.addEventListener("click", e => {
const rb = document.querySelector('input[name="_exam_"]:checked');
console.log(rb.value);
})
<form class="questionForm" id="q1" data-question="1">
<div>
<p>Question 1</p>
<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
<p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
<p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
<p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
<p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
</div>
<input id="button" type="button" value="Volgende">
</form>
推荐阅读
- ruby-on-rails - 为什么没有用户对象作为该 rails_spec 测试的参数传递?
- flutter - 如何使用颤振发送语音消息?
- javascript - 修复了导航隐藏在谷歌地图下并在滚动后单击时移动
- php - 正则表达式仅过滤大写辅音
- jmeter - 如何遍历 Json 对象的内容
- jquery - 如何在ajax调用中在jquery中使用三元运算符?
- javascript - 推送时NodeJS数组结果为空
- javascript - 如何在运行 window.location.href 之前执行一个动画
- arrays - 为什么数组的行为是这样的
- debugging - 使用堆栈 gdb 调试错误的 x86-64 函数调用无法访问位置 xxx 的内存