Question

我做了一个简单的计算器，但是没有用。我如何使它工作？

import { Datagrid, TextField, EditButton, DeleteButton } from 'react-admin';
export const SaleList = props => (
    <List {...props}>
        <Datagrid>
            <TextField source="id"/>
            <EditButton/>
            <DeleteButton/>
        </Datagrid>
    </List>
);

$(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)
})

Answer 1

calculate.click（getResult）未传递该函数期望的值。从函数参数
重命名跨度（不建议为函数，vars和html元素使用相同的名称）
确保将字符串强制转换为数字
只有一个var结果
$（'＃resultSpan'）。text（result）在使用它的函数中
secondNumer中的错字
缺少.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

几个问题：

您不应期望将firstNumber，operator和secondNumber作为参数传递给getResult函数。保留这些参数-您已经为具有这些名称的变量分配了适当的DOM元素。
结果的输出不应在函数之外发生-将其移至getResult内。
HTML id属性中有一个secondNumber的错字（缺少b）
val()返回一个字符串，因此当您执行+时，它将连接这两个输入字符串。要进行算术加法，请首先将这些字符串转换为数字，例如使用一元+
operation永远不会+，-，...它是input元素，因此您必须使用其中的.val()。 / li>

这是脚本的更正版本：

$(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))
   })

我如何使这个Javascript计算器工作？

3 个答案: