Javascript 如何在java脚本DOm模型中写入页面_Javascript

Javascript 如何在java脚本DOm模型中写入页面

javascript

Javascript 如何在java脚本DOm模型中写入页面,javascript,Javascript,我正在做一个java脚本应用程序，计算行驶里程/使用加仑数和使用加仑数*每加仑价格。我有两个问题： 1当我输入所有值时，每加仑的价格自动加上另一个零。例如，40变为400。 2我想在按钮下面写下两次计算的结果。如果有人能给我指导或帮助，我将不胜感激 <!DOCTYPE <html> <head> <meta charset="utf-8"> <title> MPG application </tit

我正在做一个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>

你能给我举个例子说明它是在哪里做到的吗？我复制粘贴了您的代码，它为我提供了正确的值。据我所知，你在每加仑成本字段中写的唯一一件事是使用的加仑数乘以每加仑的价格。一种似乎很好用的方法

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

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

var newVarNameIsBoss=加仑*成本加仑.toFixed2

希望这有帮助

修订守则

<!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表示每加仑的价格，然后按下calculate MPG和cost of the trip按钮时，它会在450.0 price字段中添加400.0。你们并没有遇到这个问题吗？嗨，只是想确定你们对计算每加仑汽油的英里数和旅行的总成本感兴趣。所以你要做两个计算：英里/加仑用量=每加仑，加仑用量*每加仑价格=总价。总价格当前显示在警报中，MPG显示在红色文本中。对于本例，230英里，9加仑，每加仑价格7.5美元，总成本为9*7.5=67.5美元，总成本为230/9=25.56英里/加仑，这就是我的代码将给出的结果。如果你想计算其他东西，请告诉我。可能是因为您使用的是浮点数，而不是浮点数？？？只需将我的代码复制粘贴到一个新文件中并试用；