【发布时间】：2020-10-01 09:26:32
【问题描述】：
我有一个带有三组单选按钮的 html 表单，selector、selector2 和 selector3。我正在尝试添加所选单选按钮的值，但这失败了。如何在下面的alert 中添加所有值？为什么它不起作用？我尝试了不同的方式，但我可以添加值，只需在控制台中获取它们即可。
<script>
const form = document.querySelector('form');
form.addEventListener('submit', obtenerTotal);
function obtenerTotal(event) {
event.preventDefault();
const formData = new FormData(event.target);
const selector = parseInt(formData.get('selector') || '0', 10);
const selector2 = parseInt(formData.get('selector2') || '0', 10);
const selector3 = parseInt(formData.get('selector3') || '0', 10);
const result = selector + selector2 + selector3;
alert("the value is:" + result);
}
</script>
我的表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
<title>Ob Calculator</title>
<script src="main.js"></script>
</head>
<body>
<div class="alert">
<h2>Hey! Read Me...</h2>
<p></p>
</div>
<div class="container">
<form>
<h2>Ocular</h2>
<ul>
<li>
<input type="radio" id="a-option" class="radi" name="selector" value="4">
<label for="a-option">Espontanea</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" class="radi" name="selector" value="3">
<label for="b-option">Orden Verbal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="c-option" class="radi" name="selector" value="2">
<label for="c-option">Dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="d-option" class="radi" name="selector" value="1">
<label for="d-option"><a href="#verbal">No Responde</a></label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Verbal</h2>
<ul>
<li>
<input type="radio" id="e-option" name="selector2" value="5" >
<label for="e-option">Orientado y conversando</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="f-option" class="radi" name="selector2" value="4" >
<label for="f-option">Desorientado y hablando</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="h-option" class="radi" name="selector2" value="3" >
<label for="h-option">Palabras inapropiadas</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="i-option" class="radi" name="selector2" value="2" >
<label for="i-option">Sonidos Incomprensibles</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="j-option" class="radi" name="selector2" value="1" >
<label for="j-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Motora</h2>
<ul>
<li>
<input type="radio" id="k-option" class="radi" name="selector3" value="6" >
<label for="k-option">Orden verbal obedece</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="l-option" class="radi" name="selector3" value="5" >
<label for="l-option">Localiza el dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="m-option" class="radi" name="selector3" value="4" >
<label for="m-option">Retirada y flexion</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="o-option" class="radi" name="selector3" value="3" >
<label for="o-option">Flexion Anormal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="p-option" name="selector3" value="2" >
<label for="p-option">Extension</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="r-option" class="radi" name="selector3" value="1" >
<label for="r-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<button>Obtener TOTAL</button>
</form>
</div>
<div class="signature">
<p></a></p>
</div>
<script><!-- javascript from above... --></script>
</body>
</html>
【问题讨论】：
-
欢迎来到 Stack Overflow！您能否编辑您的问题并提供一个示例来说明您期望的结果以及您实际得到的结果？类似于：“如果我选择选择器值 5、选择器 2 值 4 和选择器 3 值 3，我希望结果为 12。但我得到的结果是 Nnnnn”
-
抱歉，我是新手。但你是对的。我必须对这个问题更加具体。
标签： javascript forms radio-button