如何在 javascript DOm 模型中写入页面答案

【问题标题】：How to write to page in java script DOm model如何在 javascript DOm 模型中写入页面
【发布时间】：2015-03-03 09:47:18
【问题描述】：

我正在做一个 java 脚本应用程序，用于计算里程数/使用的加仑数和使用的加仑数*每加仑价格。我有两个问题：

1) 当我输入所有值时，每加仑价格会自动添加另一个零。例如 40，变成 400。 2）我希望在按钮下方写下两个计算的结果。如果有人能给我指导或帮助，我将不胜感激。

 <!DOCTYPE 
    <html>
    <head>
    <meta charset="utf-8">
    <title> MPG application </title>

    <script>
    var $ = function(id) {
    return document.getElementById(id);

    }
    /* the user entries will be parsed  floats and a if 
    statment is checking to see if the person enters not  #*/
    var calculateMpg = function () {
        var miles = parseFloat($("miles").value); //alert(miles);
        var gallons = parseFloat($("gallons").value);
                 var costGallon = document.getElementById("costGallon").value;

        if (isNaN(miles) || isNaN(gallons)) {
            alert("enter a valid number");    

        }

        else {
         var mpg = miles/gallons;

        var costGallon = gallons*costGallon;
    $("costGallon").value=costGallon.toFixed(2);    
    //alert("your total is" +mpg );
    alert("your total  new is " + costGallon);
    //cost of trip  = gallons used * price per gallon


        }


    }
    //write to the page
    window.onload = function () {
        $("calculate").onclick = calculateMpg;
        //focues means brings the window to the front
        $("costGallon").focus();

    }

    </script>
    </head>
    <section>
    <body>
    <h1> calculate mPG </h1>
    <p>Enter the information below</p>

    <label for="miles">Miles Driven: </label>
    <!--the code under gives a form box of text-->
    <input type="text" id="miles"> <br><br>&nbsp;
    <label for = "gallons"> Gallons of gas used :</label>
    <input = "text" id="gallons"><br><br>&nbsp;
    <label for = "costGallon"> Price per Gallon: </label>
    <input = "text" id="costGallon" ><br><br>
    <label>&nbsp;</label>
    <input type = "button" id = "calculate" value = "Calculate MPG and cost of the trip">
    <!-- So here I want to say your mpg is and then call mpg. which I thought I did in the top  abobe window.onload -->
        <p style="color: red"> Your mpg is: <span id = "totalMpg"> </span>
    </section>


    </body>


    </html>

【问题讨论】：

标签： javascript

【解决方案1】：

你能举个例子说明它在哪里做的吗？我复制粘贴了您的代码，对我来说它给出了正确的值。据我了解，您在每加仑成本字段中写入的唯一内容是使用的加仑乘以每加仑的价格。似乎工作正常。

如果您能提供一个您想要实现的计算示例，我将很乐意提供帮助。

另一方面，我建议不要在第 27 行再次使用您用来保存输入字段的 DOM 对象的相同变量。此外 toFixed 不会更改您使用它的变量，而是返回一个新变量，因此请在第 28 行中删除它，并使第 27 行看起来像这样：

var newVarNameIsBoss = (gallons*costGallon).toFixed(2);

希望对你有帮助

修改后的代码

<!DOCTYPE html> <!-- scorrect doctype-->
<html>
<head>
<meta charset="utf-8">
<title> MPG application </title>

<script>
var $ = function(id) {
    return document.getElementById(id);
};//remember that a var decleration always ends with a ; even if it's a function

/* the user entries will be parsed  floats and a if 
statment is checking to see if the person enters not  #*/
var calculateMpg = function () {
    var miles = parseFloat($("miles").value), //alert(miles);
    gallons = parseFloat($("gallons").value),
    costGallon = document.getElementById("costGallon").value,
    mpg,totalCost;

    if (isNaN(miles) || isNaN(gallons)) {
        alert("enter a valid number");    

    } else {
        mpg = miles/gallons;
        totalCost = (gallons*costGallon).toFixed(2);
        costGallon.value=totalCost;  
        alert("your total  new is " + totalCost);
        $('totalMpg').innerHTML = String(mpg.toFixed(2)) + " Miles per Gallon";
    }


};//remember that a var decleration always ends with a ; even if it's a function

//write to the page
window.onload = function () {
    $("calculate").onclick = calculateMpg;
    //focues means brings the window to the front
    $("costGallon").focus();

};//remember that a var decleration always ends with a ; even if it's a function

</script>
</head>

<body>
<section> <!-- section bellow the body tag-->
<h1> calculate mPG </h1>
<p>Enter the information below</p>

<label for="miles">Miles Driven: </label>
<!--the code under gives a form box of text-->
<input type="text" id="miles"> <br/><br/>&nbsp;
<label for = "gallons"> Gallons of gas used :</label>
<input = "text" id="gallons"><br/><br/>&nbsp;
<label for = "costGallon"> Price per Gallon: </label>
<input = "text" id="costGallon" ><br/><br/>
<label>&nbsp;</label>
<input type = "button" id = "calculate" value = "Calculate MPG and cost of the trip">
<!-- So here I want to say your mpg is and then call mpg. which I thought I did in the top  abobe window.onload -->
    <p style="color: red"> Your mpg is: <span id = "totalMpg"> </span></p><!--closing p tag here-->
</section>


</body>


</html>

【讨论】：

嗨，所以当我输入 10 表示所用汽油的加仑数，然后输入 40 表示每加仑的价格，然后我按下计算 MPG 和行程成本按钮，它会在 450.0 价格字段中添加 400.0。你没有遇到这个问题？
您好，只是为了确保您有兴趣计算每加仑英里数和旅行总费用。所以你做两个计算：英里/加仑使用 = MPG 和加仑使用 * 每加仑价格 = 总价。总价当前显示在警报中，MPG 显示在红色文本中。对于这个例子，230 英里，9 加仑，每加仑 7.5 美元的价格，总成本是 9*7.5 = 67.5 美元总成本和 230/9 = 25.56 MPG 这正是我的代码会给你的结果。如果您想计算其他东西，请告诉我。可能是您使用“，”来表示浮点数而不是“。” ???
只需将我的代码复制粘贴到一个新文件中并尝试一下；）