Блог

Главная - Вопросы по программированию - Входное значение JavaScript продолжает исчезать

Входное значение JavaScript продолжает исчезать

#javascript #html

#javascript #HTML

Вопрос:

Итак, я пытаюсь создать простой калькулятор с использованием 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>

Я знаю, что я нуб и наивен. Но небольшая помощь была бы очень признательна.

Комментарии:

1. При отправке формы перезагрузка окна браузера является поведением по умолчанию. Вы можете предотвратить поведение по умолчанию, используя Event.preventDefault()

Ответ №1:

Нашел его, просто нужно было поместить «type =»button»» в кнопку отправки.

 <button id="submit" type="button" >submit</button>

Это предотвращает обновление страницы.