Question

我的getPercentage函数可以完美地工作，但是我的getPayment函数即使写的完全一样也不能。当我单击“获取付款”按钮时，它在HTML上返回“ NaN”。

var taxes = {
  getPercentage: function(total, payment) {
   var percentage = (payment / total) * 100;
   return percentage;
   },
  getPayment: function(total, rate) {
    var payment = (total*rate);
    return payment;
    }
  };

var handlers = {
  getPercentage: function() {
    var totalInput = document.getElementById('totalInput');
    var paymentInput = document.getElementById('paymentInput');
    var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
    getPercentageAnswer.innerHTML = answer;
  },
  getPayment: function() {
    var totalInputTwo = document.getElementById('totalInputTwo');
    var rateInput = document.getElementById("rateInput");
    var answer = taxes.getPayment(totalInputTwo.value, rateInput.value);
    getPaymentAnswer.innerHTML = answer;
  }
};

<div id="getPayment">
  <div id="totalTwo">
        Total owed: 
    <input id="totalInputTwo" type="text">
  </div>
<div id="rateInput">
      Your tax rate (as a decimal):
  <input id="rateInput" type="text">
  </div>
  <button onclick="handlers.getPayment()">Get payment</button>
  <p id="getPaymentAnswer"></p>
</div>

Answer 1

您有一个div和一个input，其ID为rateInput。因此，rateInput.value试图从value获取div，并且返回未定义。将div的id更改为其他内容，以在rateInput

中获得正确的输入元素

var taxes = {
  getPayment: function(total, rate) {
    var payment = (total * rate);
    return payment;
  }
};

var handlers = {
  getPayment: function() {
    var totalInputTwo = document.getElementById('totalInputTwo');
    var rateInput = document.getElementById("rateInput");
    var answer = taxes.getPayment(+totalInputTwo.value, +rateInput.value);
    getPaymentAnswer.innerHTML = answer;
  }
};

<div id="getPayment">
  <div id="totalTwo">
    Total owed:
    <input id="totalInputTwo" type="text">
  </div>
  <div id="rate">
    Your tax rate (as a decimal):
    <input id="rateInput" type="text">
  </div>
  <button onclick="handlers.getPayment()">Get payment</button>
  <p id="getPaymentAnswer"></p>
</div>

注意：

input的值始终为字符串格式。因此，在执行任何数学运算之前，应始终将它们解析为数字。当您相乘时，会被强制转换为数字。因此，这里没有问题。但是，如果要进行加法运算，则将字符串连接起来，而不是将其数值相加。

因此，您可以使用Unary plus operator将字符串转换为数字：

var answer = taxes.getPayment(+totalInputTwo.value, +rateInput.value);

Answer 2

在进行一些计算之前，您应该在输入中添加一些验证。验证如下：

检查输入是否为数字，如果不是数字，则在这种情况下向用户显示什么内容。
如果输入为空，然后用户单击按钮以计算结果。

您应该先处理这些情况，然后您的代码才能更好地工作。

@adiga解决了代码中的错误，但我提供了一种验证输入的方法：

var taxes = {
  getPayment: function(total, rate) {
    var payment = (total * rate);
    return payment;
  }
};

var isNumber = function(value) {
  return /^\d+$/.test(value.trim())
}

var handlers = {
  getPayment: function() {
    var totalInputTwo = document.getElementById('totalInputTwo');
    var rateInput = document.getElementById("rateInput");
    
    // validating code
    var totalInputTwo_value = totalInputTwo.value.trim()
    if(isNumber(totalInputTwo.value) && isNumber(rateInput.value)) {
        var answer = taxes.getPayment(totalInputTwo.value, rateInput.value);
       getPaymentAnswer.innerHTML = answer;
    } else {
      alert("Input is not number of empty. Please check!");
    }
    // console.log(typeof totalInputTwo.value);
    
  }
};

  <div id="getPayment">
  <div id="totalTwo">
    Total owed:
    <input id="totalInputTwo" type="text">
  </div>
  <div id="rate">
    Your tax rate (as a decimal):
    <input id="rateInput" type="text">
  </div>
  <button onclick="handlers.getPayment()">Get payment</button>
  <p id="getPaymentAnswer"></p>
</div>

为什么两个数字相乘会出现NaN错误？

2 个答案: