时间戳

首页 > 解决方案 > 我怎样才能让这个 Javascript 计算器工作？

javascript - 我怎样才能让这个 Javascript 计算器工作？

问题描述

我做了一个简单的计算器，但它不工作。我怎样才能让它工作？

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

标签： javascriptjqueryhtml

解决方案

  • calculate.click(getResult) 没有通过函数的预期。从函数参数中删除 firstNumber, operation, secondNumber
  • 重命名 span（不建议函数、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>

推荐阅读