Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
SeiferLoire

removing object from array using click event

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...