我正在尝试创建一个卷号. 通过调用 javascript 函数，然后将最新条目放入数组中，列出课堂上的学生列表

嗨，我希望能够在屏幕上输入新学生的姓名和卷号，并使用Javascript函数和for循环和数组将该学生添加到现有学生列表中，并在同一页面上显示新列表。

我能够让页面输入新学生和卷号，并显示确认。但是当我单击"提交"时，控制台显示违规：[违规]"单击"处理程序花费了 4061 毫秒。

请看一下，让我知道我哪里出错了。

这是我下面的代码：

<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<script type="text/Javascript">
var array = [];
function addtolist(){
var x = document.getElementById("fname").value;
array[x] = document.getElementById("rNo").value;
alert ("Ok, " + x + " added in the class list with roll no. " + array [x]);
for (var i = 0; i<array.length; i++){
document.write("</br>"+ x + ":" + array [x]);
}
}
</script>
</head>
<body>
<h1 id= "title">Roll No. Entry</h1>
<p1> Enter Roll No. and First Name and Click Submit </p1><br><br>
<label for="fname"> First Name: </label><br>
<input type="text" id="fname" name="fname"/><br>
<label for="rNo"> Roll No: </label><br>
<input type="number" id="rNo" name="rNo"/><br><br>
<input type="submit" value="Submit" onclick="addtolist()">

</body>
</html>

嘿，这不是数组在javascript中的工作方式。数组在javascript中没有像php关联数组那样的自定义键。因此，您可以尝试在数组中附加对象。
以下是您要实现的目标的工作代码：

<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<script type="text/Javascript">
var array = [];
function addtolist(){
var fname = document.getElementById("fname").value;
var roll = document.getElementById("rNo").value;
array.push({
fname: fname,
roll: roll
});
alert ("Ok, " + fname + " added in the class list with roll no. " + roll);
for (var i = 0; i<array.length; i++){
console.log(i, 'kk')
document.write("</br>"+ fname + ":" + roll);
}
}
</script>
</head>
<body>
<h1 id= "title">Roll No. Entry</h1>
<p1> Enter Roll No. and First Name and Click Submit </p1><br><br>
<label for="fname"> First Name: </label><br>
<input type="text" id="fname" name="fname"/><br>
<label for="rNo"> Roll No: </label><br>
<input type="number" id="rNo" name="rNo"/><br><br>
<input type="submit" value="Submit" onclick="addtolist()">

</body>
</html>

像这样？

const allStudents = [];
const addtolist = () => {
const fname = document.getElementById("fname").value;
const rNo = document.getElementById("rNo").value;
document.getElementById("fname").value = "";
document.getElementById("rNo").value = "";
const newStudent = {
fname,
rNo
}
allStudents.push(newStudent);
renderList();
}
const renderList = () => {
const studentCount = allStudents.length;
const lastAdded = allStudents[studentCount - 1];
const newListItem = document.createElement("div");
newListItem.textContent = `Name: ${lastAdded.fname} Roll Number: ${lastAdded.rNo}`
document.body.append(newListItem);
}

<h1 id="title">Roll No. Entry</h1>
<p1> Enter Roll No. and First Name and Click Submit </p1><br><br>
<label for="fname"> First Name: </label><br>
<input type="text" id="fname" name="fname" /><br>
<label for="rNo"> Roll No: </label><br>
<input type="number" id="rNo" name="rNo" /><br><br>
<input type="submit" value="Submit" onclick="addtolist()">

相关内容

最新更新

热门标签：