Question

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

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

＆＃13;

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");
    }


  }
}

＆＃13;

<!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>

＆＃13;

代码显示没有错误，但在点击Calculate时不起作用。

任何帮助都会受到很大的影响，因为我还在学习javaScript。

Answer 1

以下2个语句必须抛出错误 -

alert("risk is low";

alert(risk = "high";

在任何浏览器上执行代码时按F12。在其中寻找控制台。你必须在那里看到错误。

Answer 2

提交表单时不会调用您的函数

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

您的活动应该是这样的。

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

Answer 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")));
}

Answer 4

您不能将同一reduceByKey用于多个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");
    }


  }
}

根据特定值打印消息

4 个答案: