我正在尝试将"grades"添加到数组中，但它没有按计划进行

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

我有两个功能。第一个调用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>

有什么想法吗？

每次调用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>";
    }
}

演示

不过，实际上并不需要那个循环。由于列表应该已经包含了以前调用的项目，所以您真正需要做的就是添加新的项目：

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

演示

相关内容

最新更新

热门标签：