根据特定值打印消息答案

【问题标题】：Printing a message depending on a specific value根据特定值打印消息
【发布时间】：2018-01-13 10:44:10
【问题描述】：

我正在为大学做的一个项目遇到问题。它包括使用 html 表单和 javascript 创建糖尿病风险评估工具。

基本上有 4 个问题，每个问题都有 4 个可能的答案（使用单选按钮，每个问题用户只能选择一个答案）。最后，将有一个“计算”按钮，它将计算所选答案的值，将值相加并根据结果显示一条消息。这是html和javascript的代码：

let calc = document.getElementById('form');

calc.addEventListener('submit', calculateAndPrintRisk);

function calculateRisk() {
  let age = document.querySelector('input[name="age"]:checked').value;
  let bmi = document.querySelector('input[name="bmi"]:checked').value;
  let diabetes = document.querySelector('input[name="diabetes"]:checked').value;
  let diet = document.querySelector('input[name="diet"]:checked').value;
  return age + bmi + diabetes + diet;
};

function calculateAndPrintRisk(e) {
  e.preventDefault();
  var risk;
  var riskTotal = calculateRisk();

  if (riskTotal) {
    if (riskTotal <= 15) {
      alert("risk is low");
    } else if (riskTotal <= 25) {
      alert(risk = "medium");

    } else {
      alert(risk = "high");
    }


  }
}

<!DOCTYPE HTML>
    <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>JavaScript FMA</title>
       <link rel="stylesheet" type="text/css" href="stylesheet.css">
    
    </head>
    <script src="diabetestool.js"> </script>
    <body>

<div id="wrapper">

  <h1>The Diabetes Risk Assesment Tool</h1>
  <div id="Options">
    <form id="form">
      <p> How old are you? </p>
      1-25 <input type="radio" name="age" value="0" checked> 26-40 <input type="radio" name="age" value="5"> 41-60 <input type="radio" name="age" value="8"> 60+ <input type="radio" name="age" value="10">

      <p> What is your BMI? </p>

      0-25 <input type="radio" name="bmi" value="0" checked> 26-30 <input type="radio" name="bmi" value="0"> 31-35 <input type="radio" name="bmi" value="9"> 35+ <input type="radio" name="bmi" value="10">

      <p> Does anybody in your family have diabetes? </p>

      No <input type="radio" name="diabetes" value="0" checked> Grandparent <input type="radio" name="diabetes" value="7"> Sibling <input type="radio" name="diabetes" value="15"> Parent <input type="radio" name="diabetes" value="15">


      <p> How would you describe your diet? </p>

      Low sugar <input type="radio" name="diet" value="0" checked> Normal sugar <input type="radio" name="diet" value="0"> Quite high sugar <input type="radio" name="diet" value="7"> High sugar <input type="radio" name="diet" value="10">


      <input type="submit" id="calculate" name="button_calculate" value="Calculate">
    </form>
  </div>
</div>
    </body>
    </html>

代码没有显示错误，但是当我点击计算时不起作用。

任何帮助将不胜感激，因为我仍在学习 javaScript。

【问题讨论】：

你在哪里检查错误？..它一定是扔了一些
以前的编辑修正了错字
您将需要window.onload=function() { document.querySelector("form").onsubmit=function() {calculateAndPrintRisk();return false; } - 不要将事件处理程序附加到提交按钮。使其成为按钮或附加到表单提交事件并取消事件

标签： javascript html forms radio-button

【解决方案1】：

以下 2 条语句肯定抛出了错误 -

alert("risk is low";

alert(risk = "high";

在任何浏览器上执行代码时按 F12。在其中寻找控制台。您一定看到了那里的错误。

【讨论】：

你是对的 Rajeev。我没有看到那些缺少的括号。谢谢你

【解决方案2】：

提交表单时不会调用函数

您需要添加和 eventListener 来检测您何时提交您的帖子，然后取消该事件，调用您的 calcultateRisk 函数

你的活动应该是这样的。

document.getElementById('form1').addEventListener('submit', function(evt){
  evt.preventDefault();
  // do what you want
  // call your function
})

【讨论】：

你有机会指导我这个事件监听器吗？我应该在链接到 type="submit" 输入的 Javascript 文件中创建一个 eventListener 吗？
刚刚用一个例子编辑了我的帖子。如果你在 google 上查看“Javscript event”，你会发现很多东西
@Miguel 从不将任何内容附加到提交按钮。将其设为按钮或附加到表单提交事件

【解决方案3】：

有一些拼写错误、不必要的表单（因为您不想提交某些内容），并且输入值通常是字符串，它们通过 + 运算符连接起来。您可能希望获得所有已选中的：

[...document.querySelectorAll('input:checked')]

并将它们减少到它们的总和值：

.reduce((sum,el)=>sum+parseInt(el.value),0);

function calculateRisk() {
  return [...document.querySelectorAll('input:checked')].reduce((sum, el) => sum + parseInt(el.value), 0);
}

function calculateAndPrintRisk() {
  var riskTotal = calculateRisk();

  if (riskTotal <= 15) {
    alert("risk is low");
  } else if (riskTotal <= 25) {
    alert("risk is medium");
  } else {
    alert("risk is high");
  }


}

<div id="wrapper">

  <h1>The Diabetes Risk Assesment Tool</h1>
  <div id="Options">
    <p> How old are you? </p>
    1-25 <input type="radio" id="opt" name="age" value="0" checked> 26-40 <input type="radio" id="opt" name="age" value="5"> 41-60 <input type="radio" id="opt" name="age" value="8"> 60+ <input type="radio" id="opt" name="age" value="10">

    <p> What is your BMI? </p>

    0-25 <input type="radio" id="opt" name="bmi" value="0" checked> 26-30 <input type="radio" id="opt" name="bmi" value="0"> 31-35 <input type="radio" id="opt" name="bmi" value="9"> 35+ <input type="radio" id="opt" name="bmi" value="10">

    <p> Does anybody in your family have diabetes? </p>

    No <input type="radio" id="opt" name="diabetes" value="0" checked> Grandparent <input type="radio" id="opt" name="diabetes" value="7"> Sibling <input type="radio" id="opt" name="diabetes" value="15"> Parent <input type="radio" id="opt" name="diabetes"
      value="15">


    <p> How would you describe your diet? </p>

    Low sugar <input type="radio" id="opt" name="diet" value="0" checked> Normal sugar <input type="radio" id="opt" name="diet" value="0"> Quite high sugar <input type="radio" id="opt" name="diet" value="7"> High sugar <input type="radio" id="opt" name="diet"
      value="10">


    <button id="calculate" name="button_calculate" value="Calculate" onclick="calculateAndPrintRisk();">Calculate</button>
  </div>
</div>

请注意，您的 if else 可以简化为

function calculateAndPrintRisk(){
  alert("your risk is "+(riskTotal<=15?"low":(riskTotal<=25?"medium":"high")));
}

【讨论】：

我建议你不要在菜鸟上强制使用 ES6。
@mplungjan 为什么不呢？然后他可以自己将推荐的编辑应用到他的代码中，或者他可以学习正确的 JS 并放弃 noob 状态..
您的“正确”JS 需要 Babel 或 shims 才能在多个浏览器上运行。正确的 JS 也没有使用内联事件处理程序

【解决方案4】：

您不能对多个 HTML 元素使用相同的 id。我已经更新了代码并使用querySelector 来获取无线电元素的value。

let calc = document.getElementById('form');

calc.addEventListener('submit', calculateAndPrintRisk);

function calculateRisk() {
  let age = document.querySelector('input[name="age"]:checked').value;
  let bmi = document.querySelector('input[name="bmi"]:checked').value;
  let diabetes = document.querySelector('input[name="diabetes"]:checked').value;
  let diet = document.querySelector('input[name="diet"]:checked').value;
  return age + bmi + diabetes + diet;
};

function calculateAndPrintRisk(e) {
  e.preventDefault();
  var risk;
  var riskTotal = calculateRisk();

  if (riskTotal) {
    if (riskTotal <= 15) {
      alert("risk is low");
    } else if (riskTotal <= 25) {
      alert(risk = "medium");

    } else {
      alert(risk = "high");
    }


  }
}

<div id="wrapper">

  <h1>The Diabetes Risk Assesment Tool</h1>
  <div id="Options">
    <form id="form">
      <p> How old are you? </p>
      1-25 <input type="radio" name="age" value="0" checked> 26-40 <input type="radio" name="age" value="5"> 41-60 <input type="radio" name="age" value="8"> 60+ <input type="radio" name="age" value="10">

      <p> What is your BMI? </p>

      0-25 <input type="radio" name="bmi" value="0" checked> 26-30 <input type="radio" name="bmi" value="0"> 31-35 <input type="radio" name="bmi" value="9"> 35+ <input type="radio" name="bmi" value="10">

      <p> Does anybody in your family have diabetes? </p>

      No <input type="radio" name="diabetes" value="0" checked> Grandparent <input type="radio" name="diabetes" value="7"> Sibling <input type="radio" name="diabetes" value="15"> Parent <input type="radio" name="diabetes" value="15">


      <p> How would you describe your diet? </p>

      Low sugar <input type="radio" name="diet" value="0" checked> Normal sugar <input type="radio" name="diet" value="0"> Quite high sugar <input type="radio" name="diet" value="7"> High sugar <input type="radio" name="diet" value="10">


      <input type="submit" id="calculate" name="button_calculate" value="Calculate">
    </form>
  </div>
</div>

【讨论】：

我也会取消提交事件
我已经尝试过您的解决方案，但代码仍然无法正常工作。当我点击计算时，无论我在问题中选择哪个选项，都不会发生任何事情。有什么想法吗？
如果你点击Run code snippet，代码正在运行。所以，我的代码没有问题。您可以提供有关您面临的错误的更多信息。
@AnuragSinghBisht 你是对的，如果我使用运行代码 sn-p 它似乎可以工作，但在我的编辑器中我有正确的 html 和 javascript 代码，但它不起作用。当我点击计算时，它不会显示警告框。
您是否添加了form id。尝试将我的代码复制粘贴到您的代码中并运行。我在表单标签中添加了 form 的 id，并且还从输入中删除了 id 标签。