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

标签 javascript arrays user-input

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

我有两个函数。第一个调用 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>";
    }
}

DEMO

不过,实际上并没有太多需要那个循环。由于列表应该已经包含之前调用的项目,所以您真正需要做的就是附加新的:

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

DEMO

关于javascript - 我正在尝试将 "grades"添加到数组,但它没有按计划进行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26560072/

相关文章:

javascript - 日期选择器 Bootstrap 不保存

javascript - 我如何确保一个函数调用接一个发生

javascript - 无法访问 express js router.delete 中的参数

javascript - 使用要查找的键数组和要替换的数组值来查找和替换

java - 如何从 Java 数组中删除对象?

python - 与用户输入相比,用户登录从文件读取失败

javascript - 在另一个函数中全局调用一个函数

Java Hashmap 和已知索引的二维数组性能

python - 将用户输入用于 Python 的正则表达式是否安全?

python - 通过用户输入搜索词典