防止在表单提交javascript上刷新页面_Javascript_Html_Css

防止在表单提交javascript上刷新页面

javascript html css

防止在表单提交javascript上刷新页面,javascript,html,css,Javascript,Html,Css,当我按下Calculate按钮时，我需要在DIV中显示一条消息（默认情况下是隐藏的）。此时，当我单击“计算”时，框中会短暂出现文本，但由于页面刷新，它会消失并返回到原始内容我怎样才能防止这种情况发生？我看过其他类似的帖子，但没有一个答案能解决我的问题 var calc = document.getElementById('form'); calc.addEventListener('submit', calculateAndPrintRisk); var total; var riskTo

当我按下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");
     }

  }

HMTL：


JavaScript-FMA
糖尿病风险评估工具
你多大了
1-25 
26-40  
41-60 
60+ 
你的体重指数是多少
0-25 
26-30  
31-35  
35+ 
你家里有人患有糖尿病吗
不
祖父母
兄弟姐妹
父母亲
你如何描述你的饮食
低糖
正常糖
糖分很高
高糖

用

替换

元素

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

如果您将类型从

提交

更改为

按钮

，它将不会提交表单。然后您可以更改事件处理程序来处理按钮单击

document.getElementById（“计算”）.addEventListener（“单击”，计算出DPrintRisk）；
总风险价值；
var风险总额；
变量年龄；
体重指数；
var饮食；
糖尿病；
函数计算器isk（）{
年龄=文档.querySelector（'input[name=“age”]：checked'）。值；
bmi=document.querySelector（'input[name=“bmi”]：checked'）。值；
糖尿病=document.querySelector（'input[name=“diabetes”]：checked'）。值；
diet=document.querySelector（'input[name=“diet”]：checked'）。值；
年龄=parseInt（年龄）；
bmi=parseInt（bmi）；
糖尿病=parseInt（糖尿病）；
饮食=parseInt（饮食）；
总数=年龄+体重指数+糖尿病+饮食；
返回总数；
};
函数calculateAndPrintRisk（）{
var riskTotal=calculateRisk（）；
var panel=document.getElementById（“messagePanel”）；
如果（总计），则按钮将为按钮
。按钮
的默认类型
为提交
。您不希望按钮提交，但已使用输入类型=“提交”
。我想知道是否有其他类型的你可以使用而不会提交…如果有的话，或者某种类型的人可以使用…问题是，这是大学作业。因此，事实上，无论提交与否，它都不会将其发送到服务器或类似的任何东西。按钮或输入的目的只是显示一个d根据“风险”的值，每当按下时，都会在其下方显示消息。谢谢！这解决了我遇到的问题。a感谢您的帮助
#messagePanel{
    width:600px;
    height:150px;
    border:1px solid black;
    visibility:hidden;

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