我怎样才能让这个 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))
   })