Question

我有一个可以计算价格的函数。如果年龄<5岁，则价格= 0，当年龄<15岁时价格=价格/ 2 当年龄> 15岁时，价格=价格+价格* 0.15。前两个工作正常，但最后一个有问题。例如，如果在价格输入中输入100，在年龄输入中输入26，则得出的答案是10015。

<script>
  function add(x, y) {
    return x+y;
  }
  function Subtract(x, y) {
    return x-y;
  }
  function Divide(x, y) {
    return x/y;
  }
  function Multiply(x, y) {
    return x*y;
  }
  var plusPrice = (function () {
    var counter = 0;
    return function () {return counter += 1;}
  })();
  var plusButton = (function () {
    var counter = 0;
    return function () {return counter += 1;}
  })();
  function updateClickCount() {
    document.getElementById("clicks").innerHTML = plusButton();
    if (document.getElementById("price").value !== '') {
      document.getElementById("input").innerHTML = plusPrice();
    }
  }
  function checkInputs() {
    var price = document.getElementById("price").value;
    var age = document.getElementById("age").value;
    if( parseInt(price) < 0  ||  isNaN(parseInt(price))) {
      window.alert("Please insert a valid price");
      price = '';
    }
    if(parseInt(age) > 100 || parseInt(age) < 0 ||  isNaN(parseInt(age))){
      window.alert("Please insert a valid age");
      age = '';
    }
  }
  function Calculate() {
    var price = document.getElementById("price").value;
    var age = document.getElementById("age").value;
    if (document.getElementById("price").value !== '' && document.getElementById("age").value !== '') {
      if (age<5) {
        document.getElementById("demo").innerHTML = Subtract(price,price);
      } else if (age < 15 && age >= 5) {
        document.getElementById("demo").innerHTML = Divide(price,2);
      } else {
        document.getElementById("demo").innerHTML = add(price,Multiply(price,0.15));
      }
    } else {
      window.alert("Please fill both age and price to calculate the amount you have to pay");
    }
  }

</script>

<body>
    Please enter the price: <br>
    <input type="text" id="price"><button onclick="document.getElementById('price').value = ''">Clear input field</button><br><br>
    Please enter your age: <br>
    <input type="text" id="age"><button onclick="document.getElementById('age').value = ''">Clear input field</button><br><br>
    <button onclick="checkInputs(); updateClickCount(); Calculate();">Calculate price</button>
    <p id="totalPrice">The total amount you have to pay is: </p><br>
    <p id="demo"></p>
    <p>Button Clicks: <a id="clicks">0</a></p>
    <p>Correct Price Fill Count: <span id="input">0</span></p>
  </body>

Answer 1

显然，price是一个字符串。替换

    var price = document.getElementById("price").value;

使用

    var price = parseFloat(document.getElementById("price").value);

该函数已经可用于减法和除法，因为运算符-和/无法应用于字符串，因此JS将其强制为数字。 +但是具有字符串兼容的解释（字符串串联），因此不会发生强制类型。

Answer 2

或执行此操作
var price = Number（document.getElementById（“ price”）。value）;

Answer 3

在JavaScript中，+符号可用于数字加法和字符串连接，具体取决于两侧的变量。例如，

console.log('value:' + 4);           // 'value:4'
console.log(3 + 1);                   // 4
console.log('value:' + 4 + '+' + 1); // 'value:4+1'
console.log('value:' + 4 + 1);       // 'value:41'
console.log('value:' + (3 + 1));     // 'value:4'
console.log(4 + ' is the value');    // '4 is the value

因此，在进行加法运算之前，请将您的操作数转换为数字类型，以免将它们连接在一起。

希望这可以澄清。

使用功能时输出错误

3 个答案: