我是一個新手,我希望讓我的基本 HTML 計算器正常作業。
我讓 JavaScript 作業到它在字串變數中記錄從我的 HTML 按鈕按下的按鈕。因此,例如,如果我在計算器上單擊 9 * 9,我可以看到控制臺中有一個字串“9 * 9”,這就是我所追求的。
我一直在嘗試讓 JavaScript 將字串視為數學陳述句,并且我知道我需要一個匿名函式來讓 JS 計算字串,例如“10 * 10”變為 100。
但是,當我的等號按鈕上的事件偵聽器呼叫我的函式時,我沒有在控制臺中得到結果。我添加了一個控制臺日志,至少讓我知道按下等號按鈕已注冊,并且已注冊。如果我使用控制臺日志單獨呼叫代碼中的函式,或者我在宣告點將 userInput 變數設定為適合計算 ee“10*10”的字串,我只會得到數字結果。所以它有點作業,但我不能讓它在正常使用中計算 userInput,只有當它被硬編碼時。我已經仔細檢查了 userInput 是一個字串用戶 typeof 并且它是。
// My event listener statement is here:
eqs.addEventListener("click", calcs);
當我單擊 = 我希望呼叫 calcs 并回傳 return 陳述句時,無論 userInput 的值是什么,它都會被計算出來。
// The function:
function calcs() {
return new Function("return " userInput)();
}
第一次發帖,所以這可能缺少關鍵資訊,但感謝您提供任何幫助。
uj5u.com熱心網友回復:
不知道為什么你認為你需要回傳正在執行的函式的結果。這只是將結果回傳給 click 事件以確定它是否應該處理它或停止。
userInput = "9*10";
const eqs = document.querySelector("button");
eqs.addEventListener("click", calcs);
function calcs() {
const result = new Function("return " userInput)();
console.log(result);
}
<button type="button">=</button>
uj5u.com熱心網友回復:
為什么不這樣:
https://jsfiddle.net/9svfy0gc/2/
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<br/>
<button> </button>
<button>-</button>
<button>/</button>
<button>*</button>
<br/>
<button>=</button>
<div class="log">
</div>
let actions = []
const log = (data) => {
document.querySelector('.log').textContent = data
}
const calc = () => {
log(`Do something with [${actions.join(',')}]`)
actions = []
}
document.querySelectorAll('button').forEach(div => {
div.addEventListener('click', () => {
actions.push(div.textContent)
log(`Queue action: ${div.textContent} - Actions: ${actions.join(',')}`)
if (actions[actions.length-1] === '=') {
calc()
}
})
})
uj5u.com熱心網友回復:
Rick,我不知道所有的實作細節,但我確實想幫忙。
警告
- 使用 Function 建構式或 eval 存在安全風險。永遠不要在生產代碼中這樣做
- 沒有決議器就無法創建可用的計算器。如果你不嘗試,你只會得到意大利面條代碼
- 匿名函式只是一個沒有名字的函式。
- 最好的辦法是使用 eval 函式,因為函式建構式不會編譯運算子
意大利面答案
const calc = () => {
const leftOperand = document.querySelector('#leftOperand').value;
const operator = document.querySelector('#operator').value;
const rightOperand = document.querySelector('#rightOperand').value;
var actual = eval(`${leftOperand}${operator}${rightOperand}`);
console.log(actual);
return actual;
}
document.querySelector('#evaluator').addEventListener('click', calc);
<input id="leftOperand" type="text" placeholder="Left Operand" />
<input id="operator" type="text" placeholder="Operator" />
<input id="rightOperand" type="text" placeholder="Right Operand" />
<button id="evaluator">=</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/532114.html
下一篇:如何從函式的變數中獲取輸出?
