ARTICLE AD BOX
I'm making a basic stat tracker with HTML, CSS, and JS for a fighting game. Most of it is functional, I can track which characters I used and whether I won or lost but now I'm trying to add a delete button to each match that was previously saved and is rendered on screen and running into issues. I was able to get the function to work when I clicked on the box a match result was in, but not the actual delete button. I tried adding line 55:
if (e.target.closest(".delBtn")) {but now nothing is being deleted and no errors are being thrown. What am I doing wrong?
<!DOCTYPE html> <html lang="en"> <head> <title>2KXO Tracker</title> <meta charset="UTF-8"> <link href="2KXO.css" rel="stylesheet"> </head> </html> <body> <h1>2KXO Trackertt</h1> <main> <form id="statForm"> <label for="win">Won or Lost?</label> <select name= "win" id= "win"> <option value="Blank"></option> <option value="Won">Won</option> <option value="Lost">Lost</option> </select> <label for="fighter1">Choose Point Fighter</label> <select name= "fighter1" id= "fighter1"> <option value="" disabled selected >Fighter 1</option> <option value="Ahri">Ahri</option> <option value="Yasuo">Yasuo</option> <option value="Ekko">Ekko</option> <option value="Warwick">Warwick</option> <option value="Teemo">Teemo</option> <option value="Jinx">Jinx</option> <option value="Braum">Braum</option> <option value="Illaoi">Illaoi</option> <option value="Vi">Vi</option> <option value="Blitzcrank">Blitzcrank</option> <option value="Darius">Darius</option> </select> <label for="fighter2">Choose Second Fighter</label> <select name= "fighter2" id= "fighter2"> <option value="" disabled selected >Fighter 2</option> <option value="Ahri">Ahri</option> <option value="Yasuo">Yasuo</option> <option value="Ekko">Ekko</option> <option value="Warwick">Warwick</option> <option value="Teemo">Teemo</option> <option value="Jinx">Jinx</option> <option value="Braum">Braum</option> <option value="Illaoi">Illaoi</option> <option value="Vi">Vi</option> <option value="Blitzcrank">Blitzcrank</option> <option value="Darius">Darius</option> </select> <button id="saveBtn">Save Match</button> </form> <div class="results" id="results"></div> </main> <script src="Index.js"></script> </body> body { background-color: rgb(18, 18, 18); color: rgb(204, 245, 100); } .results { width: 100%; padding: 10px; text-align: center; background-color: blue; } .results { margin: 5px;; border: 5px; border-style: dashed; } p { color:rgb(245, 100, 100); border: 1px; border-style: solid; border-color:rgb(204, 245, 100); padding: 2px; } //pull fighters and win/lose options selected by user from HTML for use/manipulation/storage in JS const fighter1select = document.getElementById("fighter1"); const fighter2select = document.getElementById("fighter2"); const win = document.getElementById("win"); //adds listener to the HTMl element with saveBtn as ID and then runs the JS function myAlert when clicked document.getElementById("saveBtn").addEventListener("click", myAlert); //adds listener to run loadMatches func when page is loaded/reloaded document.addEventListener("DOMContentLoaded", loadMatches); //adds listener for a click on the results box and then runs deleteMatch func document.getElementById("results").addEventListener("click", deleteMatch); //parses local storage for an it called "matches" and sets that equal to the JS variable matches function loadMatches() { const matches = JSON.parse(localStorage.getItem("matches")) || []; matches.forEach(displayMatches); } //loads previously saved matches, creates new match, pushes new match to the matches array, and then runs displayMatches to updated stats on screen function myAlert(e) { e.preventDefault(); //Loads any existing matches saved in local storage or creates a new/empty array titled 'matches' const matches = JSON.parse(localStorage.getItem("matches")) || []; //add a new match const match = { win: win.value, fighter1: fighter1select.value, fighter2: fighter2select.value, id: Date.now(), }; //push the new match to matches array matches.push(match); //runs the display matches function to add the new match to the screen displayMatches(match); localStorage.setItem("matches", JSON.stringify(matches)); } function displayMatches(match) { const para = document.createElement("p"); para.id = String(match.id) para.textContent = `${match.win} | ${match.fighter1} & ${match.fighter2}`; const deleteBtn = document.createElement("button"); deleteBtn.textContent = ("Delete Match") deleteBtn.classList.add("delBtn") deleteBtn.dataset.id = String(match.id); para.appendChild(deleteBtn); document.getElementById("results").appendChild(para); }; function deleteMatch(e) { if (e.target.closest(".delBtn")) { const para = e.target.closest("p"); if (para && e.target.id === para.id) // Prevent deleting when clicking on the paragraph itself { para.remove(); const id = para.id; let matches = JSON.parse(localStorage.getItem("matches")) || []; matches = matches.filter(match => match.id !== id); localStorage.setItem("matches", JSON.stringify(matches)); } } }