为什么这个函数在 eventListener 中不起作用？

Question

我刚开始使用 JavaScript，对于我的第一个项目，我试图使用 JS、HTML 和 CSS 显示一个工作计算器。我离最终处理简单的操作只有一步之遥，但由于某种原因，我的“求解器”功能在按下 Enter 按钮时不起作用。

我已经尝试了“test.js”console.logging 中的所有功能，结果一切正常。但由于某种原因，将它与 eventListener 组合并尝试在文本字段中显示它时，它不会起作用。我还尝试了更简单的函数，并仅在有效的文本字段中显示变量。只是求解器函数不会。

我将附上我的代码 - 你们中的大多数人肯定会编写一个与我编写的方式大不相同，尤其是短得多的计算器，但我很自豪我能做到这一点，所以请不要对我评价太苛刻！ :D

首先是在 test.js 中完美运行的函数声明。求解器最初设计为 return 之前的 4 个函数嵌套，但我认为这可能是问题所在，所以我更改了它。

function adds(num1, num2) {
    return num1+num2;
};

function subs(num1, num2) {
    return num1-num2;
};
function muls(num1, num2) {
    return num1*num2;
};
function divis(num1, num2) {
    return num1/num2;
};

//Creates an array with string elements.
function createArray(string) {
    let array = [];
    for(let element of string) {
        array.push((element));
    }
    return array;
};

//Returns an array where numbers are joint within one element (e.g. '1','2' becomes '12').
function joinNums(array) {
    let numArray = [''];
    let index = 0;

    for (i=0; i < array.length; i++) {
        if (isNaN(parseInt(array[i]))) {
            index ++;
            numArray.push(array[i]);
            index++;
            numArray[index]=[''];
            continue;
        }
    numArray[index] =numArray[index] + array[i];
    }
    return numArray;
};

//Returns an array where all elements with numbers in them are changed to proper numbers instead of strings. 
function makeNums(array) {
    let numArray = [''];
    let index = 0;

    for (i=0; i < array.length; i++) {
        if (isNaN(parseInt(array[i]))) {
            index ++;
            numArray.push(array[i]);
            index++;
            numArray[index]=[''];
            continue;
        }
    numArray[index] = parseInt(array[i]);
    }
    return numArray;
};

//Calculates the array that is provided and returns a single number as solution.
function operate(array) {
    let solution = array[0];
    for(let iOp = 1; array.length >= iOp; iOp=iOp+2) {
        if(array[iOp] === '+') {
            solution = adds(solution, array[iOp+1]);
        }
        
        if(array[iOp] === '-') {
            solution = subs(solution, array[iOp+1]);
        }
        
        if(array[iOp] === '*') {
            solution = muls(solution, array[iOp+1]);
        }
        
        if(array[iOp] === '/') {
            solution = divis(solution, array[iOp+1]);
        }
    }
    return solution;
};

//Takes a string (meant to be the value of a textfield) and returns the solution by calling all previously declared helper functions.
function solver(string) {
    let cr =  createArray(string);
    let jo =  joinNums(cr);
    let ma =  makeNums(jo);
    let op =  operate(ma);
    return op;
};

现在进入输入字段并按下回车键：

//This is the enter-button
let enter = document.getElementById("enter");
//This is the textfield where calculations are entered. The textfield is then meant to be changed to display the operations result.
let textfield = document.getElementById("resultLn");
//The eventlistener.
enter.addEventListener("click", () => {
    textfield.value = solver(textfield.value);
    });

Answer 1

嗨,

您的计算器代码运行良好，如果有问题，请检查您的 html。

我测试了一些操作，效果很好。如果有任何操作不成功，请输入此操作以帮助您

//This is the enter-button
let enter = document.getElementById("enter");
//This is the textfield where calculations are entered. The textfield is then meant to be changed to display the operations result.
let textfield = document.getElementById("resultLn");
//The eventlistener.
enter.addEventListener("click", () => {
    textfield.value = solver(textfield.value);
    });

function adds(num1, num2) {
    return num1+num2;
};

function subs(num1, num2) {
    return num1-num2;
};
function muls(num1, num2) {
    return num1*num2;
};
function divis(num1, num2) {
    return num1/num2;
};

//Creates an array with string elements.
function createArray(string) {
    let array = [];
    for(let element of string) {
        array.push((element));
    }
    return array;
};

//Returns an array where numbers are joint within one element (e.g. '1','2' becomes '12').
function joinNums(array) {
    let numArray = [''];
    let index = 0;

    for (i=0; i < array.length; i++) {
        if (isNaN(parseInt(array[i]))) {
            index ++;
            numArray.push(array[i]);
            index++;
            numArray[index]=[''];
            continue;
        }
    numArray[index] =numArray[index] + array[i];
    }
    return numArray;
};

//Returns an array where all elements with numbers in them are changed to proper numbers instead of strings. 
function makeNums(array) {
    let numArray = [''];
    let index = 0;

    for (i=0; i < array.length; i++) {
        if (isNaN(parseInt(array[i]))) {
            index ++;
            numArray.push(array[i]);
            index++;
            numArray[index]=[''];
            continue;
        }
    numArray[index] = parseInt(array[i]);
    }
    return numArray;
};

//Calculates the array that is provided and returns a single number as solution.
function operate(array) {
    let solution = array[0];
    for(let iOp = 1; array.length >= iOp; iOp=iOp+2) {
        if(array[iOp] === '+') {
            solution = adds(solution, array[iOp+1]);
        }
        
        if(array[iOp] === '-') {
            solution = subs(solution, array[iOp+1]);
        }
        
        if(array[iOp] === '*') {
            solution = muls(solution, array[iOp+1]);
        }
        
        if(array[iOp] === '/') {
            solution = divis(solution, array[iOp+1]);
        }
    }
    return solution;
};

//Takes a string (meant to be the value of a textfield) and returns the solution by calling all previously declared helper functions.
function solver(string) {
    let cr =  createArray(string);
    let jo =  joinNums(cr);
    let ma =  makeNums(jo);
    let op =  operate(ma);
    return op;
};

    <input type="text" id="resultLn">
    <button id="enter">Enter</button>

Answer 2

您没有在 for 循环 i 操作数（在函数 joinNums、makeNums 处）使用 let 语句。
另外在函数 operate 中，您可以使用 switch.

为什么这个函数在 eventListener 中不起作用？

Why does this function not work within the eventListener?

html

javascript

arrays

function

addeventlistener