Question

我收到undefined错误，不知道为什么这不起作用。

应该将租金除以室友数量：

function splitRent() {

  var roommates = document.getElementById("rent");
  var rent = document.getElementById("rent");
  var rentEach = rent / roommates;

  if (document.getElementById("submit") == true) {

    document.write("You each should pay" + " " + rentEach)

  } else {

    document.alert("Gimme info")
  }

};

<h1>Roommate Room Splitter</h1>

<form id="myForm">
  Roommates:
  <input type="text" name="roommates" id="roommates">
  <br/>Rent:
  <input type="text" name="rent" id="rent">
  <br/>

  <input type='submit' id='submit' value='Submit' onclick="splitRent()" />

</form>

Answer 1

您想要获取字段的value，而不是字段本身。

document.getElementById()返回节点，但您需要input字段的value：

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

另外，你得到的租金价值是两倍;你也想检查室友。

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

最后，document.getElementById("submit") == true没有任何意义：您将按钮节点与布尔值进行比较，这没有意义。如果要检查以确保两个字段都已填满，请尝试以下操作：

if(roommates && rent){
    //do calculations
}else{
   window.alert("Enter something"); //note that it's window.alert(), not document.alert(), which is not a function

目前，这允许人们输入不是数字的东西;你可以做两件事来解决这个问题。

使用parseInt() / parseFloat()确保您提取的数字
在进行计算之前检查您确实有一个数字

你会做这样的事情：

var rent = parseInt(document.getElementById("rent").value);
var roommates = parseFloat(document.getElementById("rooommates").value);

如果您使用我上面所做的检查（rent && roommates），则会在那里进行验证（它会检查空值和NaN值）。

function splitRent() {

  var roommates = parseInt(document.getElementById("roommates").value);
  var rent = parseFloat(document.getElementById("rent").value);
  var rentEach = rent / roommates;

  if (roommates && rent) {

    document.write("You each should pay" + " " + rentEach)

  } else {

    window.alert("Gimme info")
  }

};

<h1>Roommate Room Splitter</h1>

<form id="myForm">
  Roommates:
  <input type="text" name="roommates" id="roommates">
  <br/>Rent:
  <input type="text" name="rent" id="rent">
  <br/>

  <input type='submit' id='submit' value='Submit' onclick="splitRent()" />

</form>

Answer 2

不应该是：

    var roommates = document.getElementById("roommates").value;
    var rent = document.getElementById("rent").value;

你的结果总是得到“1”吗？

抓取表单字段并根据输入进行计算

2 个答案: