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

Question

I'm getting an undefined error and don't know why this isn't working.

It's supposed to divide the rent by the amount of roommates:

 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

You want to take the value of the fields, not the fields themselves.

document.getElementById() returns the node, but you want the value of the input field:

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

Also, you're getting the value of the rent twice; you want to check the roommates as well.

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

Lastly, document.getElementById("submit") == true doesn't mean anything: you're comparing a button node with a boolean value, which doesn't make sense. If you want to check to make sure that both fields are filled, try this:

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

As it stands, this allows people to enter things that are not numbers; there are two things that you could do to fix that.

1. Use parseInt() / parseFloat() to ensure that you're extracting a number
2. Check that you actually have a number before doing calculations

You'd do something like this:

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

If you use the checking I've done above ( rent && roommates ), the validation will take place there (it checks for both empty and NaN values).

 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

Shouldn't this be:

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

Do you always get "1" for your result?