堆栈内存溢出
  简体   繁体   English

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

[英]function in javascript doesn't work once being trigger?

 原文  2019-03-19 11:52:05  2   4    javascript

问题描述

I am developing a vanilla javascript calculator from scratch. 我正在从头开发一个香草javascript计算器。 I was able to accomplish the separation between the numbers and operations but once I pass the arrays to another functions that function doesn't work at all for some reason. 我能够完成数字和操作之间的分离，但是一旦我将数组传递给另一个函数，那么函数由于某种原因根本不起作用。 Please note I'm a self-learner and I'm a beginner javascript developer so I'm in the process to learn and practice. 请注意我是一名自学者，而且我是初学者javascript开发人员，所以我正在学习和练习。 The code: 代码： 

 //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>

4 个解决方案

解决方案1
 1  2019-03-19 12:07:49

You are assigning a value to textfield but this is just a string, it won't automatically appear in the page. 您正在为textfield分配值，但这只是一个字符串，它不会自动出现在页面中。

If you want its value to appear in the page (when pressing 'equals') then you would use: 如果你希望它的值出现在页面中（当按'等于'时），你会使用： 

document.getElementById('result').value = "some value";

Note that you are also calling your function result(numbers, operations) twice, it is better to call it once and store the result. 请注意，您还要调用函数result(numbers, operations)两次，最好调用一次并存储结果。

解决方案2
 1  2019-03-19 12:07:53

Another way is to use eval() function. 另一种方法是使用eval（）函数。

You can change your event equal like 你可以改变你的事件 

document.getElementById('equal').addEventListener("click", function(){
    var elResult = document.getElementById('result');
    textfield = " ";
    elResult.value = eval(elResult.value);
})

Or (better) you can use window.Function 或者（更好）你可以使用window.Function 

document.getElementById('equal').addEventListener("click", function(){
  var elResult = document.getElementById('result');

  textfield = " ";
  elResult.value = Function('"use strict";return (' + elResult.value + ')')();
})

eg 例如 

 var newNum = true; function retunNumber(val) { if (newNum) { document.getElementById('result').value = val; newNum = false } else { document.getElementById('result').value += val; } } document.getElementById('clear').addEventListener("click", function() { document.getElementById('result').value = " "; newNum = true; }); document.getElementById('equal').addEventListener("click", function() { var elResult = document.getElementById('result'); newNum = true; elResult.value = Function('"use strict";return (' + elResult.value + ')')(); }) 
 .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>

解决方案3
 1 已采纳  2019-03-19 12:11:40

There are a couple small issues. 有几个小问题。

  1. }if(operations[i] == '/'){ needs to be }else if(operations[i] == '/'){ add the else }if(operations[i] == '/'){需要}else if(operations[i] == '/'){ add the else

  2. for(var i =0; i<= operations.length ; i++){ needs to be for(var i =0; i< operations.length ; i++){ Remove the = for(var i =0; i<= operations.length ; i++){需要for(var i =0; i< operations.length ; i++){ Remove the =

  3. You are assigning to textfield so when you hit equal again, the textfield is no longer the value you think it is. 您正在分配给textfield因此当您再次达到equal时， textfield不再是您认为的值。 You need to assign textField to the textbox on the page. 您需要将textField分配给页面上的文本框。

  4. Inside of the result function, currentResult and numbers[i+1] are treated as a string type. 在result函数内部， currentResult和numbers[i+1]被视为string类型。 You need to use parseInt to convert these to an integer. 您需要使用parseInt将这些转换为整数。

  5. Number.isInteger will always return false in this situation because the the function result has a return type of string . 在这种情况下， Number.isInteger将始终返回false，因为函数result的返回类型为string 。 You need to convert it back to a number by adding + in front of the function call. 您需要通过在函数调用前添加+将其转换回数字。 

  //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; }); 
 .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>

解决方案4
 0  2019-03-19 13:02:14

The array of values is a string array, so you must convert every item for number, use parseInt . 值数组是一个字符串数组，因此您必须转换每个项目的数字，使用parseInt 。 

/* here must be `else if` */

} if(operations[i] == '/'){ 
        currentResult = currentResult / numbers[i+1];
    }else{
        currentResult = "Wrong";
    }

OBS: float number will make errors. OBS：浮点数会产生错误。 Precedence ignored. 优先权被忽略了。 

 //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) { 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 function result(numbers, operations){ var currentResult = parseInt(numbers[0]); // first of all, convert to number for(var i = 0; i < operations.length ; i++) { // convert to number var currentNumber = parseInt(numbers[i+1]); if(operations[i] == '+') { currentResult += currentNumber } else if(operations[i] == '-') { currentResult -= currentNumber } else if(operations[i] == '*') { currentResult *= currentNumber } else if(operations[i] == '/') { currentResult /= currentNumber } 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); const res = result(numbers, operations) if( Number.isInteger(res) ) { /* == true <- redundant ){ */ textfield = res; } else { textfield = "Invalid expression" } /* set value to texfield */ document.getElementById('result').value = textfield; }); 
 .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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 按钮上的触发功能不起作用 - trigger function on Button doesn't work 窗口触发功能在Jquery中不起作用 - Window trigger function doesn't work in Jquery javascript功能不起作用 - javascript function doesn't work JavaScript功能不起作用 - JavaScript function doesn't work 多次加载javascript文件不起作用 - Load javascript file more than once doesn't work 触发从javascript自动下载不适用于页面加载 - trigger an automatic download from javascript doesn't work on page load 旋转功能在每次发送一次时都无法正常工作 - Rotate Function doesn't work fine On sending each time or once 只运行一次函数。 &amp;&amp; 在 IE 中不起作用 - Run function only once. && doesn't work in IE 自定义javascript函数不适用于PrettyCheckable - Custom javascript function doesn't work with PrettyCheckable “其他”在javascript函数中不起作用 - “else” doesn't work in javascript function
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM