我正在尝试通过调用 javascript function 然后将最新条目放入数组中来创建 class 学生的卷号列表

Question

嗨，我希望能够在屏幕上输入名称和卷号。 一个新学生，并使用 Javascript function 和 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>

Answer 1

像这样？

 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()">

Answer 2

嘿，这不是数组在 javascript 中的工作方式。 Arrays 在 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>

我正在尝试通过调用 javascript function 然后将最新条目放入数组中来创建 class 学生的卷号列表

问题描述

2 个解决方案

解决方案1
0 2020-06-27 03:06:39

解决方案2
0 2020-06-27 03:09:58

我正在尝试通过调用 javascript function 然后将最新条目放入数组中来创建 class 学生的卷号列表

问题描述

2 个解决方案

解决方案1 0 2020-06-27 03:06:39

解决方案2 0 2020-06-27 03:09:58

解决方案1
0 2020-06-27 03:06:39

解决方案2
0 2020-06-27 03:09:58