javascript - JavaScript输入值不断消失

问题描述

所以我正在尝试使用 JavaScript 制作一个简单的计算器。每当我按下按钮时，计算结果就会出现，但只显示几分之一秒。我猜每次按下按钮时页面都会刷新，因此输入字段被清空。我怎样才能使按钮被按下并且页面也保持不变。
这是 JavaScript 代码：

var operator;
var num1,num2;
document.getElementById("submit").addEventListener("click",function(){
    var cI = checkInputs();
    if(cI){
        operator = document.getElementById("operatorInput").value;
        num1 =  parseInt(document.getElementById("fNumber").value);
        num2 = parseInt(document.getElementById("sNumber").value);
        if(operator == "+"){
            add(num1,num2);
        }
    }
    else{
        alert("fill values first");
    }
})


function add(num1,num2){
    var sum = num1 + num2;
    document.getElementById("output").value = sum;
}




function checkInputs(){
    var s = document.getElementsByClassName("mainInputs");
    var c =0;
    for(var i=0;i<s.length;i++){
        if(s[i].value.length == 0){
            c++;
            break
        }
        
    }
    if(c > 0){
        return false;
    }
    else{
        return true;
    }
}

这是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>The Calculator</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="container">
        <h1 ">The Calculator</h1>
        <form>
            <div class="row" style="margin-bottom: 2%;">
                <div class="col-md-5 jCenter">
                    <input type="number" id="fNumber" name="fNumber" placeholder="First Number"  class="jCenter firstButtons mainInputs">
                </div>
                <div class="col-lg-2 jCenter">
                    <input type="text" id="operatorInput" name="operator"  class="jCenter firstButtons mainInputs">
                </div>
                <div class="col-md-5 jCenter">
                    <input type="number" id="sNumber" placeholder="Second Number" name="sNumber" v class="jCenter firstButtons mainInputs">
                </div>
            </div>
            <div id="submitButton">
                <button id="submit" >submit</button>
            </div>
            <div class="row ">
                <div class="col-lg-3 jCenter">
                    <button id="+" class="cButtons">+</button>

                </div>
                <div class="col-lg-3 jCenter">
                    <button id="-" class="cButtons">-</button>
                </div>
                <div class="col-lg-3 jCenter">
                    <button id="x" class="cButtons">*</button>
                </div>
                <div class="col-lg-3 jCenter">
                    <button id="d" class="cButtons">/</button>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 jCenter">
                    <button id="sin"  class="cButtons">sin</button>

                </div>
                <div class="col-lg-3 jCenter">
                    <button id="cos" class="cButtons">cos</button>
                </div>
                <div class="col-lg-3 jCenter">
                    <button id="tan" class="cButtons">tan</button>
                </div>
                <div class="col-lg-3 jCenter">
                    <button id="p" class="cButtons">%</button>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 jCenter">
                    <button id="sqrt" class="cButtons">sqrt</button>
                </div>
            </div>
            <div id="outputDiv">
                <input type="text" name="output" id="output" class="firstButtons jCenter">
            </div>
            
            
            
        </form>
    </div>

</body>
<script type="text/javascript" src="calculator.js"></script>
</html>

我知道我是菜鸟和天真。但一点帮助将不胜感激。

标签： javascripthtml

javascript - JavaScript输入值不断消失

问题描述

解决方案

推荐阅读