我是javascript新手，需要一些帮助。我已经尝试了整整一周的时间，似乎无法理解这个概念。我编写了一些代码，使我可以使用innerhtml创建卡。这些卡从阵列中获取所有必要的信息。我已经确定要在点击卡片上的按钮后将其删除的位置，但是它会删除所有卡片，并且我需要它在单击按钮时分别删除卡片。理解。这是我的JavaScript代码。
<body>
<div id="jumbo" class="jumbotron">
<h1 class="display-4">Sorting Hat</h1>
<p class="lead">Hello muggles, are you a big fan of Harry Potter? </p>
<hr class="my-4">
<p>Well you are in luck. Now you will be able to use this website to try on the sorting hat and see which house you will be sorted into.</p>
<p class="lead">
<a id="initForm" class="btn btn-primary btn-lg" onclick="openForm();" href="#" role="button">Lets Get It Started!</a>
</p>
</div>
<div id="form">
<form class="form-inline">
<h3 class="display-6">Enter First Year's Name</h3>
<div class="form-group mx-sm-3 mb-2">
<label for="insertName" class="sr-only">name</label>
<input type="text" class="form-control" id="insertName" placeholder="Harry Potter">
</div>
<button id="sort" type="submit" class="btn btn-primary mb-2">Sort</button>
</form>
</div>
<div id="studentCard"></div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
console.log("HelloWorld!");
//print to dom function for innerhtml
const printToDom = (divId, textToPrint) => {
console.log(textToPrint);
const selectedDiv = document.getElementById(divId);
selectedDiv.innerHTML = textToPrint
};
//this is my hogwarts array
const hogwartsHouse = [
'Griffindor', 'Hufflepuff', 'Slytherin', 'Ravenclaw'
];
//this variable grabs the users input into my form
const names = document.getElementById("insertName");
//this variable sets the student id to 0
//student id is located inside the sort init function
let studentId = 0;
const students = [];
//this function allows my form to be seen
function openForm() {
x = document.getElementById("form");
if(x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
//this function builds the card
const sortBuilder = (sortingHat) => {
let domString = '';
for(let i = 0; i < sortingHat.length; i++){
domString += `<div id="cardContainer">`
domString += `<div class="card" style="width: 18rem;">`
domString += `<div class="card-body">`
domString += `<h5 class="cardTitle">${sortingHat[i].name}</h5>`
domString += `<p class="card-text">${sortingHat[i].house}</p>`
domString += `<a onclick="expelStudentEvent()" id="${sortingHat[i].id}" href="#" class="expel">Expel</a>`
domString += `</div>`
domString += `</div>`
domString += `</div>`
}
printToDom('studentCard', domString)
};
//pass in id of the card i'm clicking
//i want this function to delete 1 card when the button on said card is clicked
const expelStudentEvent = () => {
let domString = '';
for(let i = 0; i < students.length; i++){
domString += ``
} if(students.length = 0){}
console.log(students)
printToDom('studentCard', domString);
};
//this function takes my users input into the form and my hogwarts array into an array that gives each input an id
const sortInit = (e) => {
const student = {
id: studentId,
name: names.value,
house: hogwartsHouse[Math.floor(Math.random() * hogwartsHouse.length)],
}
students.push(student);
console.log(students);
studentId++;
sortBuilder(students);
};
// const removeCard = () => {
// let myCard = document.getElementById(e.target.id);
// }
//this function holds my event listeners
const events = () =>{
document.getElementById('sort').addEventListener('click', sortInit)
document.getElementById(e.target.id).addEventListener('click', expelStudentEvent)
}
//this function holds all of the previous functions
const init = () => {
openForm();
sortBuilder(students);
events(students)
expelStudentEvent(e)
sortInit(expelStudentEvent)
};
//this function executes all functions
init();
任何建议或解决方案将不胜感激。谢谢
您正在分配student.length =0。您的if语句应类似于：
if(students.length == 0){}。