Javascript 从数组中删除元素时遇到问题_Javascript

Javascript 从数组中删除元素时遇到问题

javascript

Javascript 从数组中删除元素时遇到问题,javascript,Javascript,几周前我开始自学JavaScript，遇到了一个我无法解决的问题。该程序的工作原理是允许用户输入保存在数组中的名称列表，并在屏幕上显示为li元素。然后，程序将随机选择一个输入的人员。我的问题发生在尝试从列表中删除某人时。我可以从HTML中删除它们，但不能从数组中删除。我尝试使用如下所示的.splice方法，但这只删除数组中的最后一个元素。我认为这是因为indexOf（li.value）不适合此用途，但不知道还有什么可以尝试。非常感谢您的帮助 <!DOCTYPE html> <h

几周前我开始自学JavaScript，遇到了一个我无法解决的问题。该程序的工作原理是允许用户输入保存在数组中的名称列表，并在屏幕上显示为li元素。然后，程序将随机选择一个输入的人员。我的问题发生在尝试从列表中删除某人时。我可以从HTML中删除它们，但不能从数组中删除。我尝试使用如下所示的

.splice

方法，但这只删除数组中的最后一个元素。我认为这是因为

indexOf（li.value）

不适合此用途，但不知道还有什么可以尝试。非常感谢您的帮助

<!DOCTYPE html>
<html>
  <head>
    <title>Student Randomiser</title>
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <h1 id="myHeading">Student Randomiser</h1>
    <div class="list">
      <p class="description">Add Students:</p>
      <input type="text" class="studentName" value="Write Students Here">
      <button class="addStudent">Add student</button>
      <ul id= "listStudentNames">
      </ul>
      <button class="randomStudent">Select a random student</button>
</div>
<script src="randomNamePicker.js"></script>
</body>
</html>




const addStudent = document.querySelector('button.addStudent');
const studentName = document.querySelector('input.studentName');
const randomStudent = document.querySelector('button.randomStudent');
const listStudentNames = document.querySelector("ul");
let students = [
]
let number
window.onload=function(){
addStudent.addEventListener('click', addStudentToList);
randomStudent.addEventListener('click', selectRandomStudent);
listStudentNames.addEventListener("click", removeStudent);
}
function addButtons(li){
  let remove =document.createElement('button');
  remove.className= "removeStudent";
  remove.textContent = "Remove Student";
  li.appendChild(remove)
}

function removeStudent (){
  if (event.target.tagName === "BUTTON") {
let li = event.target.parentNode;
let ul = li.parentNode;
let i = students.indexOf(li.value);
students.splice(i,1);
ul.removeChild(li);
  }}

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  number =  Math.floor(Math.random() * (max - min)) + min;
}

function addStudentToList() {
  students.push(studentName.value);
  var ul = document.getElementById("listStudentNames");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(studentName.value));
  addButtons(li);
  ul.appendChild(li);
  studentName.value = "";
}

function selectRandomStudent(){
getRandomIntInclusive(0, students.length);
alert(students[number]);
}


学生随机化器
学生随机化器
添加学员：
添加学生


随机选择一个学生
const addStudent=document.querySelector（'button.addStudent'）；
const studentName=document.querySelector（'input.studentName'）；
const randomStudent=document.querySelector（'button.randomStudent'）；
const listStudentNames=document.querySelector（“ul”）；
让学生=[
]
出租号码
window.onload=function（）{
addStudent.addEventListener（'click'，addStudentToList'）；
randomStudent.addEventListener（'单击'，选择randomStudent）；
listStudentNames.addEventListener（“单击”，删除学生）；
}
功能添加按钮（li）{
让remove=document.createElement（'button'）；
remove.className=“removeStudent”；
remove.textContent=“删除学生”；
li.appendChild（删除）
}
函数removeStudent（）{
如果（event.target.tagName==“按钮”）{
让li=event.target.parentNode；
设ul=li.parentNode；
设i=students.indexOf（li.value）；
学生：拼接（i，1）；
ul.removeChild（李）；
}}
函数GetRandomInInclusive（最小值、最大值）{
min=数学单元（min）；
最大值=数学楼层（最大值）；
数字=Math.floor（Math.random（）*（max-min））+min；
}
函数addStudentToList（）{
push（studentName.value）；
var ul=document.getElementById（“listStudentNames”）；
var li=document.createElement（“li”）；
appendChild（document.createTextNode（studentName.value））；
添加按钮（li）；
ul.儿童（li）；
studentName.value=“”；
}
函数selectRandomStudent（）{
GetRandomInInclusive（0，学生长度）；
警报（学生[编号]）；
}

您的代码有各种各样的问题，有些是编程问题，有些是风格问题，有些是逻辑问题

您的主要问题是，只有表单元素具有

值

属性。所以，当你写作时：

let i = students.indexOf(li.value);

您有一个问题，因为您将

li

设置为

event.target

的父节点<代码>事件。目标是启动事件的元素，在本例中是一个

，按钮的父项是

，它（再次）没有

值

属性，并且无论如何都不是正确的元素

此值是您的

拼接所依据的值。相反，您需要获取li
元素列表或数组中li
的索引位置（它们应该相同）
接下来，在这个场景中，您首先不需要数组，因为所有学生姓名都是
元素中的元素，这意味着可以通过“节点列表”访问它们，节点列表是一个“类似数组”的对象，支持length
属性，可以枚举和索引。将
元素内容保留在同步数组中不会在此处添加任何值，并且会使整个任务变得更加复杂，因为您必须使HTML列表与数组保持同步
说到这里，这里有一个您正在尝试的工作示例，内联注释解释了为什么我的代码与您的不同

//加载DOM并且可以访问所有元素时。。。
addEventListener（“DOMContentLoaded”，function（））{
//获取解决问题所需的DOM元素的引用
//在这里使用“var”是完全可以接受的，因为它们的范围将
//是整个父函数，这就是我们想要的。全部获取
//这些参考文献只有一次，所以我们不必继续扫描
//每次我们想处理列表时，DOM都会为他们提供。而且，
//将变量命名为“名词”，就像它们引用元素时的名称一样
var btnAdd=document.querySelector（“.addStudent”）；
var btnRandom=document.querySelector（“.randomStudent”）；
var list=document.getElementById（“listStudentNames”）；
var student=document.querySelector（“输入[type='text']”）；
var输出=document.querySelector（“.report”）；
//设置一个空数组以保留同步的学生列表
var学生=[]；
//设置单击事件处理功能
btnAdd.addEventListener（“单击”，添加学生）；
btnRandom.addEventListener（“单击”，getRandomStudent）；
函数addStudent（）{
//确保有有效的输入
if（student.value.trim（）==“”）{return；}
//创建一个新的元素
var li=document.createElement（“li”）；
//使用单击事件处理程序设置新元素，该处理程序将
//使当前元素从列表中删除
li.添加监听器（“单击”，删除）；
//使用来自的文本填充元素
//元素使用.textContent属性获取原始文本集
//而表单元素的内容是通过“值”获取的
//财产
li.textContent=student.value；
//更新列表id以匹配数组索引
sync（）；
//将元素添加到列表元素的末尾
表1.儿童（李）；
//将新学员添加到阵列：
学生。推动（学生。价值）；
//从输入中清除值
student.value=“”；
日志结果（）；
}
函数getRandomStudent（）{
console.clear（）；