Jump to content
Larry Ullman's Book Forums

SeiferLoire

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About SeiferLoire

  • Rank
    Newbie
  1. Hello, i'm new to javascript and currently in a bootcamp course to become a software developer. that being said there are a lot of new ideas that have been thrown at me in the past couple weeks and i'm having trouble completing our assignment for the week. I've been tasked with creating a site that takes an input and pushes it into an array and when a button is clicked that array gets made into a card that houses a name, a hogwarts house and a button. the button on these cards needs to be able to delete the card that the button is on. I've been able to do everything up until this point. i. can't get the button to only delete one card. it deletes every card, and even when i get the button to delete one card it won't delete any other card. how do i get this to work? I'll post my code so that gives better context. //html below <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> </head> <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/popper.js@1.16.0/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> </html> //css below body { background-color: slategray; } #form{ display: none; } .expel{ background-color: blueviolet; padding: 15px 30px; } a{ list-style-type: none; color: white; } a:hover{ list-style-type: none; color: white; } //javascript below 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) }; //make function for expel students events //loops over all of the expel buttons //adds the remove student function to each button //need remove student function //remove student with the id that is equal to the id of the button, e.target.id //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(); any advice or solutions you can give would be most welcome.
×
×
  • Create New...