Question

我正在尝试返回一个数组，该数组将在div id中显示结果。没有NaN，我无法返回数组的值。我尝试向document.getElementsByName("coins").value;添加一个值，使用document.getElementsByName从表单输入中提取整数的最佳选项。从HTML5中的函数显示返回变量的最佳方法是什么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Problem #2</title>
    <link rel="stylesheet" href="css/style.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!--
Write a JavaScript function that accepts a number of U.S. cents and
returns an array containing, respectively, the smallest number of
U.S. quarters, dimes, nickels, and pennies that equal the given
amount.

Make sure to handle incorrect inputs

-->
<body>
    <h1>Problem #2:</h1>

    <form id="form" class="form">
        <input type="number" name="coins" placeholder="Enter your cents" min="0" />
        <input type="button" name="solve-val" value="Solve" onclick="chkcoin()"/>
    </form>
    <div id="answer">
        <div id="quarters">Quarters =</div>
        <div id="dimes">Dimes =</div>
        <div id="nickels">Nickels =</div>
        <div id="pennies">Pennies =</div>
    </div>
    <script src="js/jquery-2.0.3.min.js"></script>
    <script>

        var coinval = (document.getElementsByName("coins")[0].value);
        var quarter, dime, nickel, penny = 0;   

        function chkcoin() {
            leftover = coinval;
            var monvalu = [25, 10, 5];
            quarter = Math.floor(leftover % monvalu[0]);
            leftover %= monvalu[0];
            dime = Math.floor(leftover % monvalu[1]);
            leftover %= monvalu[1];
            nickel = Math.floor(leftover % monvalu[2]);
            penny = leftover % monvalu[2];
            return [quarter, dime, nickel, penny];
        };
        document.getElementById("quarters").innerHTML = 'Quarters =' +   quarter;
        document.getElementById("dimes").innerHTML = nickel;
        document.getElementById("nickels").innerHTML = dime;
        document.getElementById("pennies").innerHTML = penny;
    </script>
</body>
</html>

Answer 1

Here (jsfiddle)可以快速解决您所遇到的错误，例如代码未运行的原因。我不明白你想在这里学习什么样的数学运算，但这取决于你，就你的代码而言，你所投入的那些变量将会显示在HTML中

免责声明：我个人认为这是一种糟糕的做事方式，我敦促你处理id不是名字的元素，以及单独的HTML和JS，甚至最好注册事件处理程序而不是内联事件处理。不要气馁，这对刚刚开始学习的人来说非常好！

function chkcoin() {    
//You need to include these lines to the 'fucntion call' because otherwise you are executing them before ever giving value to the "coins" element, thus you have NaN.
  var coinval = (document.getElementsByName("coins")[0].value);
  var quarter, dime, nickel, penny = 0;

  leftover = coinval;
  var monvalu = [25, 10, 5];
  quarter = Math.floor(leftover % monvalu[0]);
  leftover %= monvalu[0];
  dime = Math.floor(leftover % monvalu[1]);
  leftover %= monvalu[1];
  nickel = Math.floor(leftover % monvalu[2]);
  penny = leftover % monvalu[2];

  //You don't need a return statement.
  //return [quarter, dime, nickel, penny];


//You need to include these lines into the 'function call' as well because you want to update the HTML on a button press, not at the script loading.
  document.getElementById("quarters").innerHTML = 'Quarters =' + quarter;
  document.getElementById("dimes").innerHTML = nickel;
  document.getElementById("nickels").innerHTML = dime;
  document.getElementById("pennies").innerHTML = penny;

};

Answer 2

上面的代码产生了一个不需要的输出，因为读取字段“coins”的值的代码写在函数 chkcoin（）之外，这意味着它会在网页加载后立即执行。但是，根据您的要求，您必须在 onclick事件上调用它，从而传递用户输入的值并执行所需的操作

此外，请检查逻辑似乎也存在一些问题：使用Math.floor（leftover / monvalu [0]）而不是Math.floor（leftover％monvalu [0]）

代码应如下所示：

    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Problem #2</title>
            <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <!--
        Write a JavaScript function that accepts a number of U.S. cents and
        returns an array containing, respectively, the smallest number of
        U.S. quarters, dimes, nickels, and pennies that equal the given
        amount.

        Make sure to handle incorrect inputs

        -->
        <body>
            <h1>Problem #2:</h1>

            <form id="form" class="form">
                <input type="number" name="coins" placeholder="Enter your cents" min="0" />
                <input type="button" name="solve-val" value="Solve" onclick="chkcoin()"/>
            </form>
            <div id="answer">
                <div id="quarters">Quarters =</div>
                <div id="dimes">Dimes =</div>
                <div id="nickels">Nickels =</div>
                <div id="pennies">Pennies =</div>
            </div>
            <script src="js/jquery-2.0.3.min.js"></script>
            <script>
                function chkcoin() {
    //Read the value of **coins** on the onclick event of the button
                var coinval = (document.getElementsByName("coins")[0].value);
                var quarter, dime, nickel, penny = 0;   


                    leftover = coinval;
                    var monvalu = [25, 10, 5];
//The logic should involve division to get number of quarters in a cent and likewise
                    quarter = Math.floor(leftover / monvalu[0]);
                    leftover %= monvalu[0];
                    dime = Math.floor(leftover / monvalu[1]);
                    leftover %= monvalu[1];
                    nickel = Math.floor(leftover / monvalu[2]);
                    penny = leftover % monvalu[2];

    //Update the div elements with the value that you have computed.No need to return an array object.
                     document.getElementById("quarters").innerHTML = 'Quarters =' +   quarter;
                document.getElementById("dimes").innerHTML = 'Dimes=' + dime;
                document.getElementById("nickels").innerHTML = 'Nickel='+nickel;
                document.getElementById("pennies").innerHTML = 'Pennies='+penny;
                };

            </script>
        </body>
        </html>

注意：document.getElementById（）优先于document.getElementByName（）。

Answer 3

最好使用getElementById获取任何输入文本的值。对于返回值这不是同时返回多个值的好方法。您可以在chkcoin（）函数中的HTML DOM中添加值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Problem #2</title>
    <link rel="stylesheet" href="css/style.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>Problem #2:</h1>

    <form id="form" class="form">
        <input type="number" name="coins" placeholder="Enter your cents" id="txtCoins" min="0" />
        <input type="button" name="solve-val" value="Solve" onclick="chkcoin()"/>
    </form>
    <div id="answer">
        <div id="quarters">Quarters =</div>
        <div id="dimes">Dimes =</div>
        <div id="nickels">Nickels =</div>
        <div id="pennies">Pennies =</div>
    </div>
    <script src="js/jquery-2.0.3.min.js"></script>
    <script>

        function chkcoin() {
            var coinval = document.getElementById("txtCoins");
            // For jQuery you can use var coinval = $("#txtCoins").val();
            var quarter, dime, nickel, penny = 0;   
            leftover = coinval;
            var monvalu = [25, 10, 5];
            quarter = Math.floor(leftover % monvalu[0]);
            leftover %= monvalu[0];
            dime = Math.floor(leftover % monvalu[1]);
            leftover %= monvalu[1];
            nickel = Math.floor(leftover % monvalu[2]);
            penny = leftover % monvalu[2];

        document.getElementById("quarters").innerHTML = 'Quarters =' +   quarter;
        document.getElementById("dimes").innerHTML = nickel;
        document.getElementById("nickels").innerHTML = dime;
        document.getElementById("pennies").innerHTML = penny;
};
    </script>
</body>
</html>

JavaScript并将变量返回到HTML元素

3 个答案: