Question

这样做的想法是输入“等级”或一般数字，检查以确保它是一个数字，将其添加到等级数组，然后为每个添加的数字创建一个包含输入的列表项包含输入的数字。

我有2个功能。第一个调用check（），将输入值赋给userInput变量，然后检查变量是否为数字。如果是，那么它调用adTo（）函数，该函数应该将userInput变量推送到grade []数组中，然后更新列表。但事实并非如此。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <Title>Ultimate Grader</title>

    <style>

    </style>
    <script>


        function check(){
            var userInput = document.getElementById('grade').value;

            if ( isNaN(userInput) || userInput === " ") {
                alert("please enter a Number");
            }else {
                adTo(userInput);
            };
        }


        function adTo(input) {
            var grade = [];

            grade.push(input);

            for (i=0; i<=grade.length; i++){
                document.getElementById("list").innerHTML = "<li><input type='number' value='" + grade[i] + "'/></li>";
            };

            };

    </script>
</head>

<body>

    <form>
    <input type="text" id="grade" name="grade" placeholder="Grade">
    <input type="button" id="add" name="add" value="Add" onclick="check()">
    </form>
    <ul id="list">
    </ul>

</body>
</html>

任何想法？

Answer 1

每次拨打adTo()时，您都会创建一个新的空数组。您需要在函数外部定义变量，因此它将在调用之间保留其值。

此外，您的for()循环每次都会在循环中替换innerHTML，它不会附加到它。使用+=追加。

var grade = [];
function adTo(input) {
    grade.push(input);
    var list = document.getElementById('list');
    list.innerHTML = ''; // Empty it
    for (var i = 0; i < grade.length; i++) {
        list.innerHTML += "<li><input type='number' value='" + grade[i] + "'/></li>";
    }
}

DEMO

但是，这个循环并不是非常需要。由于列表应该已经包含以前调用的项目，所以您真正需要做的就是添加新的项目：

function adTo(input) {
    grade.push(input);
    document.getElementById('list').innerHTML += "<li><input type='number' value='" + input + "'/></li>";
}

DEMO

我试图添加＆＃34;成绩＆＃34;到阵列，它没有按计划进行

1 个答案: