0

I created plenty of boxes in my html page, however I want the boxes to already text inside them that can be changed. basically what i mean is the boxes that I already have are blank, when I input text in the boxes their values change, but what I want is for the boxes to have original text values inside them that can be changed, here is what I have so far... thanks for the help guys,

<html>
<head>
        <title>
            COMSC-100-5066 Assign.10 by Harrash Naemi  | 12164128
        </title>


    <script>
        function getInputAsText(_id){return document.getElementById(_id).value}
        function getInputAsNumber(_id){return parseFloat(document.getElementById(_id).value)}
        function setOutput(_id, _value){document.getElementById(_id).value = _value}

        function calculate()
        {
         // declare all variables
         var OriginalServings
         var Sause
         var Beef
         var Lemon
         var Onion
         var Tomatoe
         var Shells
         var WantedServings

         // get input values
         OriginalServings = getInputAsNumber("OriginalServingsBox")
         Sause = getInputAsNumber("SauseBox")
         Beef = getInputAsNumber("BeefBox")
         Lemon = getInputAsNumber("LemonBox")
         Onion = getInputAsNumber("OnionBox")
         Tomatoe = getInputAsNumber("TomatoeBox")
         Shells = getInputAsNumber("ShellsBox")
         WantedServings = getInputAsNumber("WantedServingsBox")


         // perform conversions
         Sause = Sause / OriginalServings * WantedServings
         Beef = Beef / OriginalServings * WantedServings
         Lemon = Lemon / OriginalServings * WantedServings
         Onion = Onion / OriginalServings * WantedServings
         Tomatoe = Tomatoe / OriginalServings * WantedServings
         Shells = Shells / OriginalServings * WantedServings

         // write output value
         setOutput ("OriginalServingsBox", WantedServings)
         setOutput ("SauseBox", Sause)
         setOutput ("BeefBox", Beef)
         setOutput ("LemonBox", Lemon)
         setOutput ("OnionBox", Onion)
         setOutput ("TomatoeBox", Tomatoe)
         setOutput ("ShellsBox", Shells)
        }
    </script>

</head>

<body>
    Instructions:<br>
    Here is a recipe for tasty pasta<br>
    <br>
    To change the recipe for a different number of servings<br>
    Type the amount of each ingredient.<br>
    Type the number of servings that you want to make.
    click the go button.<br>
    Converted amounts will appear where the original amounts were typed.<br>
    <br>
    <br>
    Input values And Output Values:<br>
    For this many servings: <input id="OriginalServingsBox"><br>

    Pasta Sause, in fluid ounces: <input id="SauseBox"><br>

    Precooked Ground beef, in ounces: <input id="BeefBox"><br>

    Freshly squeezed lemons, in quantity: <input id="LemonBox"><br>

    Onions, in quantity: <input id="OnionBox"><br>

    Tomatoes, in quantity: <input id="TomatoeBox"><br>

    Pasta Shells in ounces <input id="ShellsBox"><br>

    I want to make this many servings: <input id="WantedServingsBox"><br>
    <input type="submit" value="go" onclick="calculate()"><br>

</body>
</html>
4

2 回答 2

1

您需要执行以下操作：

< input type="text" id="OriginalServingsBox" value="12 oz." >< br/ >

于 2013-07-25T01:29:32.390 回答
0

您可以将value属性用于输入

<input id="SomeBox" value="yourValue" />

在您的情况下，我认为您还必须向 html 添加一个事件

<body onload="calculate();">

就您的输入而言，我认为，您需要在加载页面时计算它们

于 2013-07-25T01:41:35.233 回答