javascript - 如何创建一个表单来验证输入并执行乘法？

我缺课了，我的书也没什么用。 我还没学会如何制作按钮，也不知道如何完成这个作业。任何帮助表示赞赏。请注意:我是初学者，这是入门类(class)，所以请保持简单!

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

我的代码:

<!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>

最佳答案

好吧，看来您当前的实现与分配不匹配。在我看来，您需要输入字段，然后单击一个按钮，所以让我们从这里开始:

输入字段: <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() 是什么样的。

“进行计算”

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

首先是从 HTML 文档中获取实际的文本字段。还记得我们之前说过的，商品价格的 ID 为 id_item_price ？事实证明，这将帮助我们现在使用这段代码访问它:

itemPrice = document.getElementById( 'id_item_price' );

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

itemQuantity = document.getElementById( 'id_item_quantity' );

现在我们有了表单字段，我们需要实际进行计算。稍等一下:我们有一个小问题。我们将对这些输入字段的引用存储在变量中，但我们没有实际值 - 只有字段。不用担心，JavaScript 让这一切变得简单:

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

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

myTotal = itemPrice.value * itemQuantity.value;

现在 doCalculations 剩下的就是输出结果了。你知道该怎么做!您已经是专业人士了:

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

但是哦，快点!如果有人在这些字段之一中输入“apples”而不是数字怎么办？看来我们必须验证一下。

验证

这个有点棘手，所以请跟着我。我们需要首先创建一个函数来验证我们的输入。为此，我们将使用两个 JavaScript 函数。如果你不明白我在这里的解释，请务必上网查一下，这样你才能完全理解。

isNan( myNumber )如果 JavaScript 发现 myNumber 参数为 NaN 值，则返回 true。

parseFloat( myNumber )如果 JavaScript 能够将该条目值转换为 float ，则将返回一个数字。如果不能，它将返回 NaN。

isFinite如果数字是有限的合法数字，则返回 true。否则为假。

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

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

专业提示:回想一下 &&是逻辑与。当且仅当两个函数的结果都为 true 时，它才会返回 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>

关于javascript - 如何创建一个表单来验证输入并执行乘法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9560136/

javascript - 如何创建一个表单来验证输入并执行乘法？

上一篇：javascript string.replace 方法。无法返回所需的字符串

下一篇：PHP 获取 url 中的 var1 + var2，例如 .php?=1something?=3