Question

我正在使用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>

Answer 1

乘客是一个字符串，而不是一个数字。你做的同样的事情就是说费用=＆＃39;圣诞老人＆＃39; +＆＃39; Claus＆＃39 ;;事实上它的成本=＆＃39; 1＆＃39; +＆＃39; 4＆＃39 ;;没有改变＆＃39; 1＆＃39;和＆＃39; 4＆＃39;到1和4。

解决方案是使用parseInt，Number或this answer中的一种方法。

Answer 2

如果您将任何里程设置为大于10，则费用为undefined。当您向乘客数量添加undefined时，结果不是数字（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;
}

Answer 3

您应该将passengers转换为数值。

方法1 +一元oprerator

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

方法2 parseInt（）

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

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

3 个答案: