javascript - javascript中的函数一旦被触发就不起作用？

问题描述

我正在从头开始开发一个香草 javascript 计算器。我能够完成数字和操作之间的分离，但是一旦我将数组传递给另一个函数，该函数由于某种原因根本不起作用。请注意，我是一名自学者，也是一名初学者 javascript 开发人员，因此我正在学习和练习。编码：

//Index.js where the problem is
// this the field to control the result textfield
var textfield = " ";

//this function to copy the number/operations button to the textfiled
//it works
function retunNumber(val) {
    console.log(val);
    if (textfield != " ") {
        textfield = textfield + val;
        document.getElementById('result').value = textfield;
    } else if (textfield == " ") {
        textfield = val;
        document.getElementById('result').value = textfield;
    }
}

//this function to clear the textfield
//it works
document.getElementById('clear').addEventListener("click", function(){
    document.getElementById('result').value= " ";
    textfield = " ";
});



// This the functions where the calculation spouses to //happen but 
//nothing
//not sure
function result(numbers, operations){

    var currentResult = numbers[0];
    for(var i =0; i<= operations.length ; i++){
        if(operations[i] == '+'){
            currentResult = currentResult + numbers[i+1];
        }else if(operations[i] == '-'){
            currentResult = currentResult - numbers[i+1];
        }else if(operations[i] == '*'){
            currentResult = currentResult * numbers[i+1];
        }if(operations[i] == '/'){
            currentResult = currentResult / numbers[i+1];
        }else{
            currentResult = "Wrong";
        } 
    }return currentResult;
}

//this the function where it should give the result
// it works partially, only in the separation of the number and the 
//operation but not in returning the result
document.getElementById('equal').addEventListener("click", function(){

    var numbers = textfield.split(/\D/g);
    var operations = textfield.split(/\d/g).filter(Boolean);
    
    /*
    console.log(textfield);
    console.log(numbers);
    console.log(operations);
    */
//here is where it spouses to return the result but nothing
   if(Number.isInteger(result(numbers, operations)) == true){
    textfield =result(numbers, operations);
   }else{
       textfield = "Invalid expression"
   }
    


});

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.container {
    margin: 10%;

}

.item1 {
grid-column: 1/5;
}

.item2 {
    grid-column: 2/4;
}

.item3 {
    grid-row: 2;
    grid-column: 4;
}

.item4 {
    grid-row: 3;
    grid-column: 4;
}
.item5 {
    grid-row: 4;
    grid-column: 4;
}

.textField {
    width: 100%;
}

<html>

<head>
    <title>Calculator</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
    <div class="container">

        <div class="grid-container">

            <div class="item1"> <input type="text" name="result" id="result" class="textField"> </div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="1">1</button> </div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="2">2</button> </div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="3">3</button></div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="4">4</button></div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="5">5</button></div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="6">6</button></div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="7">7</button></div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="8">8</button></div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="9">9</button></div>
            <div class="item2"> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="0">0</button></div>
            <div class="item5"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="*">*</button></div>
            <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="/">/</button></div>
            <div class="item3"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="+">+</button></div>
            <div class="item4"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="-">-</button></div>
            <div> <button class="btn btn-outline-info" id="equal">Equal</button></div>
            <div> <button class="btn btn-outline-info">Delete</button></div>
            <div> <button class="btn btn-outline-info" id="clear">Clear</button></div>


        </div>

    </div>
</body>

<script src="index.js"></script>

</html>

标签： javascript

javascript - javascript中的函数一旦被触发就不起作用？

问题描述

解决方案

推荐阅读