我怎樣才能讓這個 Javascript 計算器工作？

Question

我做了一個簡單的計算器，但它不起作用。 我怎樣才能讓它工作？

 $(function() { var firstNumber = $('#firstNumber') var operation = $('#operation') var secondNumber = $('#secondNumber') var calculate = $('button') calculate.click(getResult) function getResult(firstNumber, operation, secondNumber) { if (operation === '+') { var result = firstNumber.val() + secondNumber.val() } else if (operation === '-') { var result = firstNumber.val() - secondNumber.val() } else if (operation === '*') { var result = firstNumber.val() * secondNumber.val() } else { var result = firstNumber.val() / secondNumber.val() } } $('#result').text(result) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type='text' id='firstNumber' placeholder='Enter a number'> <input type='text' id='operation' placeholder='Enter an operation'> <input type='text' id='secondNumer' placeholder='Enter another number'> <br> <button>Calculate</button> <br> <p>The result is <span id='result'></span></p>

Answer 1

• calculate.click(getResult) 沒有通過函數所期望的。 從函數參數中刪除 firstNumber, operation, secondNumber
• 重命名跨度（不建議對函數、vars 和 html 元素使用相同的名稱）
• 確保將字符串轉換為數字
• 只有一個 var 結果
• $('#resultSpan').text(result) 在使用它的函數中
• 第二個數字中的錯別字
• 缺少 .val() 操作
• 不允許除以 0
• 除了 4 個允許的運算符之外的任何內容都應該給出錯誤（您也可以在計算之前測試數字）
• 我將按鈕更改為 type="button" - 如果您將元素包裝在表單中，它將提交表單

這是工作版本

 function getResult() { var result, firstNumber = +$('#firstNumber').val(), // casting value to number secondNumber = +$('#secondNumber').val(), operation = $('#operation').val(); console.log(firstNumber,operation,secondNumber) if (operation === '+') { result = firstNumber + secondNumber; } else if (operation === '-') { result = firstNumber - secondNumber; } else if (operation === '*') { result = firstNumber * secondNumber; } else if (operation === '/') { result = (secondNumber === 0) ? "Cannot divide by 0": (firstNumber / secondNumber); } else result = "Only use +,-,* or /"; $('#resultSpan').text(result) } // onload does not have to have every line of the script in it $(function() { $('button').click(getResult) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type='text' id='firstNumber' placeholder='Enter a number'> <input type='text' id='operation' placeholder='Enter an operation'> <input type='text' id='secondNumber' placeholder='Enter another number'> <br> <button type="button">Calculate</button> <br> <p>The result is <span id='resultSpan'></span></p>

Answer 2

幾個問題：

1. 您不應期望firstNumber 、 operator和secondNumber作為參數傳遞給getResult函數。 忽略這些參數——您已經將適當的 DOM 元素分配給具有這些名稱的變量。
2. 結果的輸出不應發生在函數之外——將它移到getResult內部。
3. secondNumber的 HTML id屬性中存在拼寫錯誤（缺少b ）
4. val()返回一個字符串，因此當您執行+ ，它將連接這兩個輸入字符串。 要獲得算術加法，首先將這些字符串轉換為數字，例如使用一元+
5. operation永遠不會+ , - ,... 它是input元素，因此您必須采用它的.val() 。

這是您的腳本的更正版本：

 $(function() { var firstNumber = $('#firstNumber') var operation = $('#operation') var secondNumber = $('#secondNumber') var calculate = $('button') calculate.click(getResult) function getResult() { var result var op = operation.val() if (op === '+') { result = +firstNumber.val() + +secondNumber.val() } else if (op === '-') { result = firstNumber.val() - secondNumber.val() } else if (op === '*') { result = firstNumber.val() * secondNumber.val() } else { result = firstNumber.val() / secondNumber.val() } $('#result').text(result) } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type='text' id='firstNumber' placeholder='Enter a number'> <input type='text' id='operation' placeholder='Enter an operation'> <input type='text' id='secondNumber' placeholder='Enter another number'> <br> <button>Calculate</button> <br> <p>The result is <span id='result'></span></p>

Answer 3

你的secondNumber div 有一個錯字。 我認為您正在嘗試使用IIFE但由於代碼在文檔加載時執行，您的主要變量是undefined 。 在此示例中，我使用click()處理程序並在調用時將值分配給變量（假設您在輸入中輸入了值）。

要執行數學運算，您需要從輸入中解析數值，否則您的代碼只會連接這些值而不計算它們。 根據所需的值類型，您可以將parseFloat()用於十進制值或parseInt()用於整數。

下面的代碼在我的筆中工作：

  $('#calculate').click( function() {
       var result;
       var operation = $('#operation').val()
       var firstNumber = parseFloat($('#firstNumber').val())
       var secondNumber = parseFloat($('#secondNumber').val())

       if (operation === '+') {
           result = firstNumber + secondNumber
       } else if (operation === '-') {
           result = firstNumber - secondNumber
       } else if (operation === '*') {
           result = firstNumber * secondNumber
       } else {
           result = firstNumber / secondNumber
       }

       $('#result').text(result.toFixed(2))
   })