那些遇到过的问题

一旦触发，javascript中的函数不起作用？

Abd*_*izk 5 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"
   }
    


});
Run Code Online (Sandbox Code Playgroud) 
.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%;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

S. *_*ker 1

有几个小问题。

  1. }if(operations[i] == '/'){需要}else if(operations[i] == '/'){添加else

  2. for(var i =0; i<= operations.length ; i++){需要for(var i =0; i< operations.length ; i++){删除=

  3. 当你再次textfield点击时，你正在分配给so，那么它就不再是你认为的值了。您需要分配给页面上的文本框。equaltextfieldtextField

  4. 在函数内部result，currentResult和numbers[i+1]被视为一种string类型。您需要使用parseInt将它们转换为整数。

  5. Number.isInteger在这种情况下将始终返回 false，因为该函数的result返回类型为string。+您需要通过在函数调用前面添加来将其转换回数字。

   //Index.js where the problem is
var textfield = " ";

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;
    }
}

document.getElementById('clear').addEventListener("click", function(){
    document.getElementById('result').value= " ";
    textfield = " ";
});



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

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

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);
    */
   if(Number.isInteger(+result(numbers, operations)) == true){
    textfield =result(numbers, operations);
   }else{
       textfield = "Invalid expression"
   }
   document.getElementById('result').value = textfield;


});
Run Code Online (Sandbox Code Playgroud) 
.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%;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

84 次

最近记录：

6 年，5 月 前
相关归档
一个AngularJS控制器可以调用另一个吗？ 575
如何找到jQuery中是否存在具有特定id的div？ 252
Redux - 多家商店,为什么不呢？ 196
从react-router哈希片段获取查询参数 102
如何打开一个新窗口并使用jQuery将html插入其中？ 66
开源Javascript PDF查看器 53
javascript中相对路径和绝对路径的区别 50
字符串不是窗口位置href的函数 48
为什么不推荐使用Object.observe() 47
reactjs - 如何设置backgroundcolor的内联样式？ 43
难疑归档
如何列出提交中的所有文件？ 2619
如何测试私有函数或具有私有方法,字段或内部类的类？ 2593
在vi中快速缩进多行 2111
2048游戏的最佳算法是什么？ 1893
如何检查SQL Server表中是否存在列？ 1792
家谱软件中的循环 1594
为什么Dictionary优先于Hashtable？ 1348
如何从其他线程更新GUI？ 1331
Git push需要用户名和密码 1327
SOAP与REST(差异) 1206