Question

我在课堂上缺席，我的书不是很有用。 我还没有学会如何制作按钮，也不知道如何完成此作业。任何帮助表示赞赏。请注意：我是初学者，这是一个介绍课，所以请保持简单！

两个输入框，一个用于接受商品的价格，另一个用于接受要订购的商品数量。
计算总数的一个按钮。
使用提示消息告诉他们总价格或输入数据无效。
使用函数验证商品的价格和数量是否为数字。
一旦数据有效，使用一个接受两个参数的函数，一个用于价格，一个用于价格对于项目数量，计算总数，然后显示总价格。

我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Lab 8b: Stephanie Hussar</title>

    <script type="text/javascript">

        // Input

        itemPrice = Number(prompt("Please enter the price of the item."));
        itemQuantity = Number(prompt("Please enter the quantity of the items"));
        total = itemPrice * itemQuantity


    </script>

</head>

<body>

</body>

    </html>

Answer 1

好的，所以看起来你当前的实现并不匹配。在我看来，你需要输入字段然后输入一个按钮，所以让我们从那开始：

输入字段： <input type="text" name="item_price" id="id_item_price" />

这会创建一个文本输入，其表单名称为item price，ID为id_item_price。

按钮： <input type="button" name="item_submit" id="id_item_submit" value="Calculate!" />

这会创建一个允许我们提交的按钮。我保留type="button"代替type="submit"，因为我在JavaScript中处理此问题并且不想将表单提交到其他网页。

将这些放在一起，我们有HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>My JavaScript</title>

    <script type="text/javascript">
        // TO DO: The Script!
    </script>

</head>

<body>

    <b>Enter the Item Price:</b><br />
    <input type="text" name="item_price" id="id_item_price" />

    <br /><br />

    <b>Enter the Item Quantity:</b><br />
    <input type="text" name="item_quantity" id="id_item_quantity" />

    <br /><br />
    <input type="button" name="item_submit" id="id_item_submit" value="Calculate!" />

</body>

</html>

添加计算

现在我们有了HTML，我们必须查看脚本。这里有一些概念需要注意。

按下按钮时执行代码

HTML允许我们指定元素与之交互时会发生什么。一个这样的工具叫做onclick。通过将按钮HTML更改为以下内容，只要单击按钮，我们就可以调用JavaScript函数doCalculations()！

<input type="button" name="item_submit" id="id_item_submit" value="Calculate" onclick="doCalculations()" />

现在我们已经完成了这项工作，让我们看一下doCalculations（）的样子。

＆＃34;执行计算＆＃34;

我们还没有进行验证，但为了确保一切正常，我们想查看一些概念。

首先从HTML文档中获取实际的文本字段。请记住我们之前如何说项目价格的ID为id_item_price？事实证明，这将有助于我们使用这段代码访问它：

itemPrice = document.getElementById( 'id_item_price' );

这会创建一个名为itemPrice的新变量。然后，我们使用JavaScript的getElementById()函数来获取对该特定文本字段的引用。使用相同的方法，我们可以获得数量（如果我们想要，甚至按钮！）：

itemQuantity = document.getElementById( 'id_item_quantity' );

现在我们有了表单字段，我们需要实际进行计算。坚持：我们有一个小问题。我们在变量中存储了对这些输入字段的引用，但是我们没有实际值 - 只有字段。不用担心，JavaScript让我们很容易：

<Field>.value为我们提供特定字段的价值。因此，将这些放在一起我们可以通过itemPrice.value获得itemPrice的价值。

现在我们可以获取值，让我们进行实际计算并将其存储在名为myTotal的变量中：

myTotal = itemPrice.value * itemQuantity.value;

现在，doCalculations中的所有内容都是输出结果。你知道怎么做！你已经是专业人士了：

alert( "The total cost is: " + myTotal + "!" );。

但是哦！如果有人输入＆＃34; apples＆＃34;而不是其中一个字段中的数字。看起来我们必须验证。

<强>验证

这个有点棘手，所以留在我身边。我们需要首先创建一个函数来验证我们的输入。为此，我们将使用两个JavaScript函数。如果您在此不理解我的解释，请务必在线查看，以便您完全理解。

如果JavaScript找到myNumber争论的NaN值，

isNan( myNumber )将返回true。

如果JavaScript能够将该条目值转换为浮点数，则

parseFloat( myNumber )将返回一个数字。如果它不能，它将返回NaN。

如果数字是有限的合法数字，

isFinite将返回true。否则就错了。

结合这些，我们可以检查输入的数字是否是实际数字：

function verifyNumber( myInput ){
            if( !isNaN( parseFloat( myInput.value ) ) && isFinite( myInput.value ) )
                return true;
            else
                return false;
        }

ProTip：回想一下，&&是一个逻辑AND。当且仅当两个函数的两个结果都为真时，它才会返回true。否则它将返回false。

所以现在让我们把它放到我们的doCalculations示例中：

function doCalculations(){
            itemPrice = document.getElementById( 'id_item_price' );
            itemQuantity = document.getElementById( 'id_item_quantity' );

            // Add in the validations:
            if( !verifyNumber( itemPrice ) || !verifyNumber( itemQuantity ) ){
                alert( "One or both of your numbers is incorrect! Please enter a real number." );
                return false;
            }

            myTotal = itemPrice.value * itemQuantity.value;
            alert( "The total cost is: " + myTotal + "!" );
        }

总结一下，这是我们的最终代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>My JavaScript</title>

    <script type="text/javascript">

        // Function: Verify that the input is an item number
        function verifyNumber( myInput ){
            if( !isNaN( parseFloat( myInput.value ) ) && isFinite( myInput.value ) )
                return true;
            else
                return false;
        }

        function doCalculations(){
            itemPrice = document.getElementById( 'id_item_price' );
            itemQuantity = document.getElementById( 'id_item_quantity' );

            // Add in the validations:
            if( !verifyNumber( itemPrice ) || !verifyNumber( itemQuantity ) ){
                alert( "One or both of your numbers is incorrect! Please enter a real number." );
                return false;
            }

            myTotal = itemPrice.value * itemQuantity.value;
            alert( "The total cost is: " + myTotal + "!" );
        }

    </script>

</head>

<body>

    <b>Enter the Item Price:</b><br />
    <input type="text" name="item_price" id="id_item_price" />

    <br /><br />

    <b>Enter the Item Quantity:</b><br />
    <input type="text" name="item_quantity" id="id_item_quantity" />

    <br /><br />
    <input type="button" name="item_submit" id="id_item_submit" value="Calculate" onclick="doCalculations()" />

</body>

</html>

Answer 2

两个输入框（a）表示价格，（b）表示数量

Price: <input name="price" id="price" value="" /><br />

Quantity: <input name="quantity" id="quantity" value="" />

一键计算总数

Price: <input name="price" id="price" value="" /><br />

Quantity: <input name="quantity" id="quantity" value="" /><br />

<input type="submit" name="submit" value="Total" id="get-total" />

使用提醒消息告诉他们总价格或输入数据无效。 i）假设我们需要一个函数

function calculate_total (price, quantity) {

  var valid = false;
  var total = 0;
  var the_price = 0;
  var the_quantity = 0;

  // what constitutes a valid price?
  if(price && 0 < parseFloat(price)) { // perhaps?
   the_price = parseFloat(price);
  }
  if(quantity && 0 < parseInt(quantity)) { // perhaps?
   the_quantity = parseInt(quantity);
  }

  if(the_price > 0 && the_quantity > 0) {
   valid = true; // yay! we can continue :)
   // do any other things you want to do here
  }

  if(true === valid) {
   total = the_price * the_quantity;
  }

  return total;

}

ii）好的，现在我们有了一个功能，我们该怎么办呢？ - 当我们点击提交按钮时让我们调用它，然后计算它然后

document.getElementById('get-total').onclick = function() {
 var price = document.getElementById('price').value;
 var quantity = document.getElementById('quantity').value;

 alert(calculate_total(price,quantity)); // this alerts for (3)

 return false; // stop the form being submitted
};

4）这是由上述完成的，现在是5

把它放在一起：

<!doctype html>
<html>
 <head>
  <title>Lab 8b: Stephanie Hussar</title>
 </head>
 <body>
   <p>
    Price: <input name="price" id="price" value="" /><br />
    Quantity: <input name="quantity" id="quantity" value="" /><br />
    <input type="submit" name="submit" value="Total" id="get-total" />
   </p>
   <script>
    // function to calculate the total from the price and quantity
    // and do basic (very very basic) validation on inputs
    function calculate_total (price, quantity) {
     var valid = false;
     var total = 0;
     var the_price = 0;
     var the_quantity = 0;

     // what constitutes a valid price?
     if(price && 0 < parseFloat(price)) { // perhaps?
      the_price = parseFloat(price);
     }
     if(quantity && 0 < parseInt(quantity)) { // perhaps?
      the_quantity = parseInt(quantity);
     }

     if(the_price > 0 && the_quantity > 0) {
      valid = true; // yay! we can continue :)
      // do any other things you want to do here
     }

     if(true === valid) {
      total = the_price * the_quantity;
     }

     return total;
    }

    // add click event to the button
    document.getElementById('get-total').onclick = function() {
     var price = document.getElementById('price').value;
     var quantity = document.getElementById('quantity').value;

     alert(calculate_total(price,quantity)); // this alerts for (3)

     return false; // stop the form being submitted
    };
   </script>
 </body>
</html>

Answer 3

我来：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Lab 8b: Stephanie Hussar</title>
    <script type="text/javascript">
            function isValid() {
                var price = document.getElementById('price').value;
                var items = document.getElementById('items').value;
                if (items=="" || price=="") {
                    alert('Price and quantity is required!');
                }else if (isNaN(price) || isNaN(items)) {
                    alert('Numbers only!');
                }else{
                    calculate(price, items);
                }
            }

            function calculate(price, item) {
                 var result = document.createTextNode('The total is: '+price*item);
                 var form = document.getElementById('buy');
                 form.appendChild(result);
            }

    </script>
</head>

<body>
    <form id="buy">
        <label for="price">Price:</label>
        <input id="price" />
        <br />
        <label for="items">Quantity:</label>
        <input id="items" />
        <br /><br />
        <input type="button" value="Calculate" onclick="isValid();"/>
    </form>
</body>
</html>

EXAMPLE

Answer 4

简单问题的简单解决方案：

<input id=price type=text>
<input id=quantity type=text>
<input id=but type=button value=calculate onclick="document.getElementById('output').value=document.getElementById('price').value*document.getElementById('quantity').value">
<br><input id=output type=text>

我需要帮助设置这个JavaScript代码

4 个答案: