【发布时间】：2021-02-26 09:15:57
【问题描述】：
我的代码需要一些帮助。
我需要创建一个页面，允许用户按艺术家姓名、专辑、年份等添加歌曲。
用户应该能够删除添加的歌曲，我当前的问题是，当我添加歌曲时，它不会将其添加到我的表中，并且单击删除按钮后，它不会在刷新时删除选定的歌曲。
我的清除所有按钮 100% 有效，但我的删除按钮无效。
请任何人帮忙，将不胜感激
我的 JS/JSON 代码如下：
//array that will be used to store user input
let art = [];
//will be used in the appendChild method
let body = document.getElementById("body");
function onLoad() {
let clear = document.getElementById("clear");
//create the clear all button
let clrbutton = document.createElement("button");
clrbutton.innerHTML = "Clear All";
//EventListener will trigger if button is clicked
clrbutton.addEventListener("click", function clrAll() {
//clear the local storage
localStorage.clear();
});
//position the clear all button
clrbutton.style.display = "block";
clrbutton.style.marginTop = "5px";
// add button to HTML document
clear.appendChild(clrbutton);
}
//constructor function [property, value]
function Artist(song, artist, album, release_date, genre) {
this.song = song;
this.artist = artist;
this.album = album;
this.release_date = release_date;
this.genre = genre;
}
//function to get user input values
function addArtist() {
let newArtist = new Artist(
document.getElementById("song").Value,
document.getElementById("artist").value,
document.getElementById("album").value,
document.getElementById("year").value,
document.getElementById("genre").value
);
//push new data to the back of the array
art.push(newArtist);
//add songData property to localstorage
localStorage.songData = JSON.stringify(art);
}
//check if localStorage contains any data, if true, theres's already stored data in localStorage
if (localStorage.songData) {
//Songdata
art = JSON.parse(localStorage.songData);
console.log(art);
//the in keyword, loops through each key to the art array
for (let i in art) {
//creating a table row for each object in the art array
let table_row = document.createElement("tr");
//create a button to delete a song
let dltbutton = document.createElement("button");
dltbutton.innerHTML = "Delete"
//EventListener will trigger when clicked
dltbutton.addEventListener("click", function dltSong() {
//splice(i) will delete the selected song
art.splice(i, 1);
localStorage.SongData = JSON.stringify(art);
});
//within each object, [key, value] = placeholder varibles, i refers to the specific object in the array
for (let [key, value] of Object.entries(art[i])) {
//create a th tag for eahc value in the object, within the art array
let div = document.createElement("th");
//data in th is now editable
div.contentEditable = "true";
//value = the value of each property in the object
div.innerHTML = value;
//when there is a change in the data in the input element, thee below function is called
div.oninput = function (e) {
//change the value of the key affected
art(i)[key] = e.target.innerText;
localStorage.songData = JSON.stringify(art);
};
//styling our table
div.style.margin = "10%";
div.style.border = "1 px solid black";
div.style.textAlign = "center";
div.style.padding = "10px";
table_row.appendChild(div);
}
body.appendChild(table_row);
body.appendChild(dltbutton);
}
}
我的html：
<!--Add load function-->
<body id="body" onload="onLoad()">
<h1>Music store</h1>
<form>
<!--Enter song name-->
<label>Enter song name:</label>
<input type="text" name="song" id="song" required />
<!--Enter artist name-->
<label>Enter artist name:</label>
<input type="text" name="artist" id="artist" required />
<!--Enter album name-->
<label>Enter album's name:</label>
<input type="text" name="album" id="album" required />
<!--Enter release date-->
<label>Release date:</label>
<input type="text" name="year" id="year" required />
<!--Enter genre-->
<label>Choose a genre:</label>
<select id="genre">
<option value="">..Choose a option..</option>
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Hip-Hop">Hip-Hop</option>
<option value="Metal">Metal</option>
<option value="Blues">Blues</option>
<option value="Alt">Alt</option>
</select>
<!--Our submit button-->
<button onclick="addArtist()">Add song</button>
</form>
<div>
<!--Info to help user navigate-->
<!--edit song info-->
<h4>Songs listed here can be edited and will be saved upon change.</h4>
<!--Delete song info-->
<h4>To remove a song from the list, click on the delete button. The song will be removed once page is refreshed</h4>
<!--Clear all info-->
<!--add an id to the h4 tag to position the clear all button-->
<h4 id="clear"> To clear all songs on the page, click the Clear All button. The songs will be cleared once page is refreshed</h4>
</div>
<!--Script to load javascript file-->
<script type="text/javascript" src="music.js"></script>
</body>
</html>
【问题讨论】：
标签： javascript html json