这样做的想法是输入“成绩”或一般数字,检查以确保它是一个数字,将其添加到成绩数组,然后为每个添加的数字创建一个列表项,其中包含一个输入包含输入的数字。
我有两个函数。第一个调用 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>";
}
关于javascript - 我正在尝试将 "grades"添加到数组,但它没有按计划进行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26560072/