Javascript变量没有正确添加两个变量，只是连接

Javascript variables not adding two variables correctly, only concatenating

本文关键字：变量 两个 连接 Javascript 添加      更新时间：2024-03-22

我正在用html/javascript创建一个座位预订页面。

这是我正在研究的标准的一部分：

  • 当乘客1至4时，每英里的票价增加0.10英镑

  • 当里程数小于或等于10时，每英里的票价为1英镑。-

问题是，当我试图将总成本+乘客成本加在一起时，它会连接变量（双向尝试）。

如有任何帮助，我们将不胜感激。

function MyFunction() {
  var x, text, passengers, passengerresponse, cost;
  miles = document.getElementById("miles").value;
  
  if (isNaN(miles) || miles < 1) {
    text = "Input not valid";
  } else if (miles <= 10) {
    cost = miles;
  }
  
  document.getElementById("miles2").innerHTML = miles;
  passengers = document.getElementById("passengers").value;
  if (passengers >= 1 && passengers <= 4) {
    passengerresponse = "OK";
    cost += passengers / 10;
  }
  document.getElementById("passengers2").innerHTML = passengers;
  document.getElementById("totalcost").innerHTML = cost;
}
Journey in miles:
<input id="miles" type="number">
<p id="miles2"></p>
Number of passengers:
<input id="passengers" type="number">
<p id="passengers2"></p>
<button type="button" onclick="MyFunction()">Submit</button>
Total cost:
<p id="totalcost"></p>

乘客是字符串，而不是数字。你所做的事情和说cost="圣诞老人"+"克劳斯"是一样的；事实上，它的成本="1"+"4"；不会将"1"answers"4"更改为1和4。

解决方案是使用parseInt、Number或该答案中的一个方法。

您应该将passengers转换为数值。

方法1 +一元运算器

  passengers = +document.getElementById("passengers").value;

方法2parseInt（）

passengers = +document.getElementById("passengers").value;
passengers = parseInt(passengers, 10);

如果里程数大于10，则成本为undefined。将undefined添加到乘客数量时，结果为Not a number（NaN）。

此外，我建议您对从输入中检索的数据使用parseInt。现在，您正在将它们作为字符串引入并对其进行数学运算，这之所以有效，是因为Javascript足够聪明，可以在必要时将它们隐式转换为数字。

function MyFunction()
{
    var x, text, passengers, passengerresponse, cost;
    miles = document.getElementById("miles").value; // miles is a string
    miles = parseInt(miles, 10); // convert to numeric base 10
    if (isNaN(miles) || miles < 1)
    {
        text = "Input not valid";
    }
    else if (miles <= 10)
    {
        cost = miles;
    }
    // if miles > 10, cost is undefined
    if(!cost) cost = 0;
    document.getElementById("miles2").innerHTML = miles;

    passengers = document.getElementById("passengers").value; // passengers is a string
    passengers = parseInt(passengers, 10); // convert passengers to a number
    if (passengers >= 1 && passengers <= 4 )
    {
        passengerresponse = "OK";
        console.log(cost, passengers);
        cost += passengers / 10;
    }
    document.getElementById("passengers2").innerHTML = passengers;
    document.getElementById("totalcost").innerHTML = cost;
}
相关文章：