Schaltfläche „Löschen“ nicht funktionsfähig ⇐ HTML

[Anonymous]

Ich erstelle einen einfachen Statistik-Tracker mit HTML, CSS und JS für ein Kampfspiel. Das meiste davon ist funktionsfähig, ich kann nachverfolgen, welche Charaktere ich verwendet habe und ob ich gewonnen oder verloren habe, aber jetzt versuche ich, jedem Spiel, das zuvor gespeichert wurde und auf dem Bildschirm gerendert wird, eine Löschschaltfläche hinzuzufügen, bei der Probleme auftreten. Ich konnte die Funktion zum Laufen bringen, als ich auf das Kästchen klickte, in dem sich ein Übereinstimmungsergebnis befand, aber nicht auf die eigentliche Schaltfläche „Löschen“. Ich habe versucht, Zeile 55 hinzuzufügen:

Code: Select all

    if (e.target.closest(".delBtn")) {

aber jetzt wird nichts gelöscht und es werden keine Fehler ausgegeben. Was mache ich falsch?

Code: Select all

2KXO Tracker






2KXO Trackertt


Won or Lost?


Won
Lost


Choose Point Fighter

Fighter 1
Ahri
Yasuo
Ekko
Warwick
Teemo
Jinx
Braum
Illaoi
Vi
Blitzcrank
Darius


Choose Second Fighter

Fighter 2
Ahri
Yasuo
Ekko
Warwick
Teemo
Jinx
Braum
Illaoi
Vi
Blitzcrank
Darius

Save Match

Code: Select all

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;
}

Code: Select all

//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)); }

}
}

Vielen Dank im Voraus!