如何使用Javascript单选按钮读取输入，然后打印到HTML？
我尝试做的基本点是创建一个带有单选按钮的表单，每个单选按钮都有自己的值，然后让一些Javascript根据所选内容在网页上打印一些内容 示例：用户选择1-您选择的1显示在表单下- 用户选择2-您选择的2显示在表单下 当我去测试我的代码时出现的问题是，当我点击提交按钮时，不会打印任何内容。我无法判断它是否因为没有调用函数而没有打印任何内容，或者是因为调用特定HTML标记所涉及的语法不确定，或者完全是因为其他原因。我不想学习如何使用任何javascript库，只是仍在尝试学习如何使用原始javascript，到目前为止，教程资源几乎没有任何用处，除了form.preventDefault和document.querySelectorinput[name=radInput]：checked.value如何使用Javascript单选按钮读取输入，然后打印到HTML？,javascript,html,forms,Javascript,Html,Forms,我尝试做的基本点是创建一个带有单选按钮的表单，每个单选按钮都有自己的值，然后让一些Javascript根据所选内容在网页上打印一些内容 示例：用户选择1-您选择的1显示在表单下- 用户选择2-您选择的2显示在表单下 当我去测试我的代码时出现的问题是，当我点击提交按钮时，不会打印任何内容。我无法判断它是否因为没有调用函数而没有打印任何内容，或者是因为调用特定HTML标记所涉及的语法不确定，或者完全是因为其他原因。我不想学习如何使用任何javascript库，只是仍在尝试学习如何使用原始javasc
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,scale=1">
<script language="javascript, text">
var salt =
document.querySelector("input[name=radInput]:checked").value;
var form = document.querySelector("form");
var sand = document.querySelector("pre");
form.addEventListener("submit", function(event) {
var data = new FormData(form);
var output = "";
for (const entry of data) {
output = entry[0] + "=" + entry[1] + "\r"};
sand.innerText = output;
event.preventDefault();
}, false);
</script>
</head>
<body>
<form>
<div>
<input type="radio" id="input1" name="radInput" value="1">
<label for="input1">ONE</label>
<input type="radio" id="input2" name="radInput" value="2">
<label for="input2">TWO</label>
<input type="radio" id="input3" name="radInput" value="3">
<label for="input3">THREE</label>
</div>
<div>
<button type="submit">Test</button>
</div>
</form>
<div>
<pre></pre>
</div>
</body>
</html>
我快速检查了你的脚本-我删除了var salt行，因为sand从未被引用 因此，我认为脚本在表单呈现之前运行，因此form.addEventListener永远不会正确运行，因为表单没有定义 您可以自己查看-加载页面，打开WebDeveloper控制台，转到控制台，然后键入
var form = document.querySelector("form");
var sand = document.querySelector("pre");
form.addEventListener("submit", function(event) {
console.log("clicked");
var data = new FormData(form);
var output = "";
for (const entry of data) {
output = entry[0] + "=" + entry[1] + "\r"};
sand.innerText = output;
event.preventDefault();
}, false);
Uncaught ReferenceError: fussyChild is not defined
at onload
现在，由于HTML已经存在，表单var需要绑定到一些东西。您需要确保在JS运行之前呈现HTML。我想更多关于你的信息可以在这里找到：我对你的脚本做了快速检查-我删除了var salt行，因为sand从未被引用过 因此，我认为脚本在表单呈现之前运行，因此form.addEventListener永远不会正确运行，因为表单没有定义 您可以自己查看-加载页面，打开WebDeveloper控制台，转到控制台，然后键入
var form = document.querySelector("form");
var sand = document.querySelector("pre");
form.addEventListener("submit", function(event) {
console.log("clicked");
var data = new FormData(form);
var output = "";
for (const entry of data) {
output = entry[0] + "=" + entry[1] + "\r"};
sand.innerText = output;
event.preventDefault();
}, false);
Uncaught ReferenceError: fussyChild is not defined
at onload
现在，由于HTML已经存在，表单var需要绑定到一些东西。您需要确保在JS运行之前呈现HTML。我想您可以在这里找到更多信息：看起来您正在尝试在呈现/选择所选项目之前获取该项目的值。将其放入eventhandler代码中，它应该可以工作 别忘了，你还需要验证是否检查了某些内容。。。如果您提交表单时未选中任何内容，则无法优雅地处理它 var form=document.querySelectorform； var sand=document.querySelectorpre； var salt=form.addEventListenersubmit，functionevent{ document.querySelectorinput[name=radInput]：checked.value； var数据=新的FormDataform； var输出=； 用于常量输入数据{ 输出=条目[0]+=+条目[1]+\r }; sand.innerText=输出； 违约事件； }，假； 一 二 三 测验
看起来您正在尝试在呈现/选择选定项之前获取该项的值。将其放入eventhandler代码中，它应该可以工作 别忘了，你还需要验证是否检查了某些内容。。。如果您提交表单时未选中任何内容，则无法优雅地处理它 var form=document.querySelectorform； var sand=document.querySelectorpre； var salt=form.addEventListenersubmit，functionevent{ document.querySelectorinput[name=radInput]：checked.value； var数据=新的FormDataform； var输出=； 用于常量输入数据{ 输出=条目[0]+=+条目[1]+\r }; sand.innerText=输出； 违约事件； }，假； 一 二 三 测验
@因此，我按照您提供的链接中的建议，将我所有的javascript粘贴到一个函数中，该函数将由body中的onload属性调用，但它仍然拒绝工作。当我进入开发工具时，它说 以下是我所做的更改：
@因此，我按照您提供的链接中的建议，将我所有的javascript粘贴到一个函数中，该函数将由body中的onload属性调用，但它仍然拒绝工作。当我进入开发工具时，它说 以下是我所做的更改：
替换：替换为：看看这是否有效，为我做的。欢迎光临，乐意帮忙！顺便说一句，我不知道为什么这样做是正确的，我想它会被忽略，因为它不合适，这里没有提及它：但我肯定有人知道为什么这会扼杀脚本。如果你感兴趣，请在另一篇帖子中提问：替换：改为：看看这是否有效，对我来说是这样的。欢迎你，乐于帮助！顺便说一句，我不知道为什么这是正确的方法，我想它会被忽略，因为它不合适，没有引用 ce：但我相信有人知道为什么这会扼杀剧本，如果你感兴趣，请在另一篇帖子中提问：