我剛開始使用 JavaScript，對于我的第一個專案，我正在嘗試使用 JS、HTML 和 CSS 顯示一個作業計算器。我距離它最終處理簡單的操作只有一步之遙，但由于某種原因，我的“求解器”功能在按下 Enter 按鈕時不起作用。
我已經在“test.js”控制臺中嘗試了所有功能。記錄結果并且一切正常。但是由于某種原因，將它與 eventListener 結合并嘗試在文本欄位中顯示它時它將不起作用。我還嘗試了更簡單的函式并僅在有效的文本欄位中顯示變數。只是求解器功能不會。
我會附上我的代碼——你們中的大多數人肯定會撰寫一個與我撰寫的方式大不相同的計算器，尤其是比我撰寫的方式要短得多，但我很自豪我能做到這一點，所以請不要對我評價太苛刻！:D
首先是在 test.js 中完美運行的函式宣告。求解器最初設計為以嵌套方式回傳前 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);
});
uj5u.com熱心網友回復：
您不要在回圈運算元處使用let陳述句（在函式,處）。
除了 at 函式，你還可以使用.forijoinNumsmakeNumsoperateswitch
uj5u.com熱心網友回復：
嗨，
您的計算器代碼運行良好，如果有問題，請檢查您的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/464576.html
標籤：javascript html 数组 功能 添加事件监听器