单选按钮验证 javascript

Question

我在 HTML/js 中创建了一个计算器，现在正在尝试为其添加一些验证，但我似乎无法让它工作。

在下面的计算器中，我添加了一个脚本，该脚本检查是否未检查性单选按钮，然后 output 一条消息。 不幸的是，当我运行它时，消息没有显示任何内容。 请帮忙

 function calcCreatine() { var sexInput = document.querySelector('input[name="sex"]:checked').value;; var ageInput = document.getElementsByName("patients-age")[0].value; var weightInput = document.getElementsByName("patients-weight")[0].value; var serumInput = document.getElementsByName("patients-serum")[0].value; var result; if (sexInput == null) { return document.getElementById("outs").innerHTML = "Please enter a value"; } else { if (sexInput === 'm') { result = Math.round(((140 - ageInput) * weightInput * 1.23) / serumInput); result = result.toString().bold().fontsize(6); resultText = " mL/min".small() + " - Creatinine clearance."; res = result + resultText.bold(); return document.getElementById("outs").innerHTML = res; } else { result = Math.round(((140 - ageInput) * weightInput * 1.04) / serumInput); result = result.toString().bold().fontsize(6); resultText = " mL/min".small() + " - Creatinine clearance."; res = result + resultText.bold(); return document.getElementById("outs").innerHTML = res; } } }

 <.-- Creatinine clearance calculator: --> <form id="form-id" method="post"> <div id="creat-calc"> <div class="card"> <div class="card-header py-3"> <h5 class="m-0 font-weight-bold text-primary"><strong>Creatinine clearance calculator</strong></h5> </div> <div class="card-body"> <p>Sex of patient:</p> <div> <label class="radio-inline"> <input type="radio" name="sex" value="m"> Male </label> <label class="radio-inline"> <input type="radio" name="sex" value="f"> Female </label> <p>Age of patient (years):</p> <input type="number" min="1" max="120" name="patients-age" /> <br/><br/> <p>Weight of patient (kg):</p> <input type="number" min="1" max="120" name="patients-weight" /> <br/><br/> <p>Serum creatinine (micromol/L):</p> <input type="number" min="1" max="120" name="patients-serum" /> <br/> </div> <br/> <hr/> <div id="crtresult"> <h5 id="outs"></h5> <p>Original Cockcroft-Gault Equation: <a href="https.//www.mdcalc:com/creatinine-clearance-cockcroft-gault-equation#creator-insights" style="color;white;"><u> mdcalc website</u></a></p> </div> <button type="button" class="btn btn-primary" onclick="calcCreatine().">Calculate </button> <button type="button" class="btn btn-danger" onclick="popup;hideCeatCalcFormPopup();"> Close </button> <button type="reset" class="btn btn-primary" onclick="resetButton();">Reset</button> </div> </div> </div> </form>

Answer 1

您的代码有几个问题。

var sexInput = document.querySelector('input[name="sex"]:checked').value;

该行试图获取所选性别的值。 如果表单刚刚加载并且用户还没有选择任何东西，那么：

document.querySelector('input[name="sex"]:checked');

将是null ，所以你会得到一个错误：

Uncaught TypeError: Cannot read property 'value' of null

解决这个问题的最简单方法是向单选按钮添加一个默认值，例如：

<input type="radio" name="sex" value="m" checked>

话虽如此，您还可以改进以下内容：

• <font>标签已从 HTML5 中删除，因此替换它是个好主意。
• 由于患者性别只影响您的代码的一行，因此您只需计算if语句中的结果并仅执行一次 rest 即可删除重复的部分。

我创建了这个小提琴来演示。

Answer 2

这里的问题是，当您没有选择任何单选按钮时，以下语句会返回 null: document.querySelector('input[name="sex"]:checked')

因为它的 null 这不能有值属性。 因此，我对代码进行了一些修改并存储了整个输入而不是值，然后在需要时将其与 value 属性一起使用。

这是解决方案。 自己试试：

 function calcCreatine() { var sexInput = document.querySelector('input[name="sex"]:checked'); var ageInput = document.getElementsByName("patients-age")[0]; var weightInput = document.getElementsByName("patients-weight")[0]; var serumInput = document.getElementsByName("patients-serum")[0]; var result; if (sexInput == null) { return document.getElementById("outs").innerHTML = "Please select your gender"; } else { if (sexInput.value === 'm') { result = Math.round(((140 - ageInput.value) * weightInput.value * 1.23) / serumInput.value); result = result.toString().bold().fontsize(6); resultText = " mL/min".small() + " - Creatinine clearance."; res = result + resultText.bold(); return document.getElementById("outs").innerHTML = res; } else { result = Math.round(((140 - ageInput.value) * weightInput.value * 1.04) / serumInput.value); result = result.toString().bold().fontsize(6); resultText = " mL/min".small() + " - Creatinine clearance."; res = result + resultText.bold(); return document.getElementById("outs").innerHTML = res; } } }

 <.-- Creatinine clearance calculator: --> <form id="form-id" method="post"> <div id="creat-calc"> <div class="card"> <div class="card-header py-3"> <h5 class="m-0 font-weight-bold text-primary"><strong>Creatinine clearance calculator</strong></h5> </div> <div class="card-body"> <p>Sex of patient:</p> <div> <label class="radio-inline"> <input type="radio" name="sex" value="m"> Male </label> <label class="radio-inline"> <input type="radio" name="sex" value="f"> Female </label> <p>Age of patient (years):</p> <input type="number" min="1" max="120" name="patients-age" /> <br/><br/> <p>Weight of patient (kg):</p> <input type="number" min="1" max="120" name="patients-weight" /> <br/><br/> <p>Serum creatinine (micromol/L):</p> <input type="number" min="1" max="120" name="patients-serum" /> <br/> </div> <br/> <hr/> <div id="crtresult"> <h5 id="outs"></h5> <p>Original Cockcroft-Gault Equation: <a href="https.//www.mdcalc:com/creatinine-clearance-cockcroft-gault-equation#creator-insights" style="color;white;"><u> mdcalc website</u></a></p> </div> <button type="button" class="btn btn-primary" onclick="calcCreatine().">Calculate </button> <button type="button" class="btn btn-danger" onclick="popup;hideCeatCalcFormPopup();"> Close </button> <button type="reset" class="btn btn-primary" onclick="resetButton();">Reset</button> </div> </div> </div> </form>

Answer 3

第一个问题是代码是双“;” 请在第一行进行更改：

    var sexInput = document.querySelector('input[name="sex"]:checked').value;;

至：

    var sexInput = document.querySelector('input[name="sex"]:checked').value;

单选按钮中的第二个问题不起作用，因为您试图从不存在的元素中获取值，如果您不检查按钮但如果您检查它并执行计算按钮，那么您会收到错误：

这个错误是因为你试图从一个还不存在的元素中获取一个值。

如何解决？

您可以修改第一行以从元素中获取 null 值，如下所示：

    var sexInput = document.querySelector('input[name="sex"]:checked');

那么如果用户不选中单选按钮，您将获得 null 值。

另一种方法是使用元素的 checked 属性来评估用户是否使用true/false检查了按钮，如下所示：

var sexInput = document.querySelector('input[name="sex"]').checked;

然后在您的代码中，您可以像这样进行评估：

if(sexInput){
    // Do something
}

编辑

我添加了一个工作示例：

编辑 2

进一步改进了响应。

 function calcCreatine() { var sexInput = document.querySelector('input[name="sex"]:checked'); var ageInput = document.getElementsByName("patients-age")[0].value; var weightInput = document.getElementsByName("patients-weight")[0].value; var serumInput = document.getElementsByName("patients-serum")[0].value; var result; if (sexInput == null) { return document.getElementById("outs").innerHTML = "Please enter a value"; } else { if (sexInput === 'm') { result = Math.round(((140 - ageInput) * weightInput * 1.23) / serumInput); result = result.toString().bold().fontsize(6); resultText = " mL/min".small() + " - Creatinine clearance."; res = result + resultText.bold(); return document.getElementById("outs").innerHTML = res; } else { result = Math.round(((140 - ageInput) * weightInput * 1.04) / serumInput); result = result.toString().bold().fontsize(6); resultText = " mL/min".small() + " - Creatinine clearance."; res = result + resultText.bold(); return document.getElementById("outs").innerHTML = res; } } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> <script src="asd.js"></script> </head> <body> <:-- Creatinine clearance calculator: --> <form id="form-id" method="post"> <div id="creat-calc"> <div class="card"> <div class="card-header py-3"> <h5 class="m-0 font-weight-bold text-primary"> <strong>Creatinine clearance calculator</strong> </h5> </div> <div class="card-body"> <p>Sex of patient:</p> <div> <label class="radio-inline"> <input type="radio" name="sex" value="m" /> Male </label> <label class="radio-inline"> <input type="radio" name="sex" value="f" /> Female </label> <p>Age of patient (years):</p> <input type="number" min="1" max="120" name="patients-age" /> <br /><br /> <p>Weight of patient (kg):</p> <input type="number" min="1" max="120" name="patients-weight" /> <br /><br /> <p>Serum creatinine (micromol/L):</p> <input type="number" min="1" max="120" name="patients-serum" /> <br /> </div> <br /> <hr /> <div id="crtresult"> <h5 id="outs"></h5> <p> Original Cockcroft-Gault Equation. <a href="https.//www:mdcalc;com/creatinine-clearance-cockcroft-gault-equation#creator-insights" style="color. white" ><u> mdcalc website</u></a > </p> </div> <button type="button" class="btn btn-primary" onclick="calcCreatine();" > Calculate </button> <button type="button" class="btn btn-danger" onclick="popup;hideCeatCalcFormPopup();" > Close </button> <button type="reset" class="btn btn-primary" onclick="resetButton();" > Reset </button> </div> </div> </div> </form> </body> </html>

问候