Question

当我按下Calculate按钮时，我需要在DIV内部显示一条消息（默认情况下是隐藏的）。此刻，当我点击计算框时，会短暂显示文本内部，但由于页面刷新，它会消失并返回原始内容。

如何防止这种情况发生？我查看了其他类似的帖子，但没有一个答案似乎解决了我的问题。

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

calc.addEventListener('submit', calculateAndPrintRisk);
var total;
var riskTotal;
var age;
var bmi;
var diet;
var diabetes;




function calculateRisk() {

  age = document.querySelector('input[name="age"]:checked').value;
  bmi = document.querySelector('input[name="bmi"]:checked').value;
  diabetes = document.querySelector('input[name="diabetes"]:checked').value;
  diet = document.querySelector('input[name="diet"]:checked').value;
  age = parseInt(age);
  bmi = parseInt(bmi);
  diabetes = parseInt(diabetes);
  diet = parseInt(diet);
  total = age + bmi + diabetes + diet;
  return total;

};


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

  var panel = document.getElementById("messagePanel");


    if (total <= 15) {

        var paragraph = document.createElement("p");
        var message = document.createTextNode("hello world");
        paragraph.appendChild(message);
        panel.appendChild(paragraph);




    } else if (total <= 25) {

          alert("medium");

   } else {

         alert("high");
     }

  }

CSS：

#messagePanel{
    width:600px;
    height:150px;
    border:1px solid black;
    visibility:hidden;

HMTL：

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

    </head>

    <body>

<div id="wrapper">

  <h1>The Diabetes Risk Assesment Tool</h1>
  <div id="Options">
    <form id="form">

      <fieldset>

      <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">
        </fieldset>

        <fieldset>
      <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">
       </fieldset>

       <fieldset>

      <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">
        </fieldset>

        <fieldset>


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

        </fieldset>

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

            <div id="messagePanel">
            </div>

  </div>
</div>
<script src="diabetestool.js"> </script>
    </body>
    </html>

Answer 1

如果您将类型从submit更改为button，则不会提交表单。然后，您可以更改事件处理程序以处理按钮单击。

＆＃13;

document.getElementById("calculate").addEventListener("click", calculateAndPrintRisk);

var total;
var riskTotal;
var age;
var bmi;
var diet;
var diabetes;




function calculateRisk() {

  age = document.querySelector('input[name="age"]:checked').value;
  bmi = document.querySelector('input[name="bmi"]:checked').value;
  diabetes = document.querySelector('input[name="diabetes"]:checked').value;
  diet = document.querySelector('input[name="diet"]:checked').value;
  age = parseInt(age);
  bmi = parseInt(bmi);
  diabetes = parseInt(diabetes);
  diet = parseInt(diet);
  total = age + bmi + diabetes + diet;
  return total;

};


function calculateAndPrintRisk() {
  var riskTotal = calculateRisk();

  var panel = document.getElementById("messagePanel");


    if (total <= 15) {

        var paragraph = document.createElement("p");
        var message = document.createTextNode("hello world");
        paragraph.appendChild(message);
        panel.appendChild(paragraph);

    } else if (total <= 25) {

          alert("medium");

   } else {

         alert("high");
     }
  
  return false;

  }

＆＃13;

#messagePanel{
    width:600px;
    height:150px;
    border:1px solid black;
    visibility:hidden;
}

＆＃13;

    <html lang="en>
    <head>
       <meta charset="utf-8">
       <title>JavaScript FMA</title>
       <link rel="stylesheet" type="text/css" href="stylesheet.css">

    </head>

    <body>

<div id="wrapper">

  <h1>The Diabetes Risk Assesment Tool</h1>
  <div id="Options">
    <form id="form">

      <fieldset>

      <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">
        </fieldset>

        <fieldset>
      <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">
       </fieldset>

       <fieldset>

      <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">
        </fieldset>

        <fieldset>


      <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">

        </fieldset>

      <input type="button" id="calculate" name="button_calculate" value="Calculate">
    </form>

            <div id="messagePanel">
            </div>

  </div>
</div>
    </body>
    </html>

＆＃13;

Answer 2

将<input>元素替换为<button>。

输入将提交表单并发回服务器。使用button元素可以避免这种情况。

阻止页面刷新表单提交javascript

2 个答案: