Quick JavaScript Question

1

I’m new to JavaScript and I am trying to figure out how to replace text that is inside a Div.

Here is what I’m using:


<script type="text/javascript">
    function calc() {
        var sqft = document.getElementById("sqft").value;
        var inch = document.getElementById("in").value;
        
        var total = Math.round(inch*0.623*0.9*sqft);
        
        var results = document.createTextNode(total);
        var view = document.getElementById("results").innerHTML;
        document.getElementById("results").appendChild(results);
        if(results != view)
        {
            document.getElementById("results").removeChild(view);
            document.getElementById("results").appendChild(results);
        };
    }
</script>

But it is not doing what I’m looking for. What I want to happen is when the user inputs information into the two text boxes that it will calculate them and return the results…but before it does I want it to clear the information…if any from the Div.

I can’t get the information back out…it just keeps adding the new numbers.

Any help would be great! And how you did it so I can learn how to do it.

Thanks!

P.S.

Here is all the HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
    function calc() {
        var sqft = document.getElementById("sqft").value;
        var inch = document.getElementById("in").value;
        
        var total = Math.round(inch*0.623*0.9*sqft);
        
        var results = document.createTextNode(total);
        var view = document.getElementById("results").innerHTML;
        document.getElementById("results").appendChild(results);
        if(results != view)
        {
            document.getElementById("results").removeChild(view);
            document.getElementById("results").appendChild(results);
        };
    }
</script>
<style type="text/css">
#results { color:#000; font-size:36px; font-family:"Courier New", Courier, mono; }
</style>
</head>

<body>

<form action="#" id="form" onsubmit="calc(); return false;">

    <input type="text" id="sqft" />Sq<br />
    <input type="text" id="in" />In<br  />
    
    <input type="submit" value="Submit" />

</form>

<div id="results"></div>

<p>Gallons</p>

</body>
</html>