Javascript:避免重新加载窗口

Question

我有这个从未提交过的表单:它只是触发一个 calcularplazas()按下非提交按钮时的功能:

<form name="what" id="what" action="">   
  <input id="mat" type="text"/>
  <button id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>                         
  <input id="btnLimpiar" class="btn" type="reset" value="CLEAR" />
  <p id="resultado"></p>
 </form>  

当点击按钮时，功能正常工作但无法显示结果，因为窗口会重新加载。我不理解这种行为，因为函数中没有任何内容可以使其重新加载，表单提交也没有。

因此，结果文本被导出到 <p id="resultado"></p>但随着窗口重新加载，几毫秒后消失。

为什么会出现这种行为？

function calcularplazas(){    

        var mensaje = "MENSAJE FINAL";
        document.getElementById("resultado").innerHTML = mensaje;
}

Answer 1

你说“不提交”按钮，但因为你还没有给你的 <button>元素a type属性，默认情况下它是一个提交按钮。您需要告诉浏览器将其视为“普通”按钮:

<button type="button" id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button> 

现在单击此按钮不会提交表单，也不会导致页面重新加载。