<!--this is what i have done on my html-->
let artistV=[];
//i created an empty array which will be used to store objects
artist=document.getElementById("artist");
title=document.getElementById("title");
genre=document.getElementById("genre");
album=document.getElementById("album");
function thePage() {
// this when the page has loaded
let theTrack = document.getElementById("artistList");
theTrack.style.visibility = "hidden";
if (sessionStorage.getItem("hasCodeRunBefore") ===null) {
sessionStorage.setItem("artists",JSON.stringify(artistV));
sessionStorage.setItem("hasCodeRunBefore",true);
} else {
artistV=JSON.parse(sessionStorage.getItem("artists"));
let i =0;
artistV.forEach(function(p){
let theItems=document.createElements("ul");
theItems.innerHTML=p.artist+"-"+p.title;
theItems.value =i;
i = i + 1;
theTrack.appendChild(ulItems)
});
if ( i > 0 ) {
theTrack.style.visibility="visible";
}
}
}
function Artist(artist,title,genre,album) {
// body...
this.artist=artist;
this.title=title;
this.genre=genre;
this.album=album;
}
function submitData() {
// body...
location.reload();
//this refreshes the page when the button is clicked
e.preventDefault();
let newArtist=new Artist(
artist.value,
title.value,
genre.value,
album.value,
);
artistV.push(newArtist);
sessionStorage.setItem("artists",JSON.stringify(artistV));
TheTrack.appendChild(newArtist);
artist.value=' ';
title.value=' ';
genre.value=' ';
album.value=' ';
}
function changeArt(artistName) {
artistV[artistName].display = function() {
artist.value = artistV[artistName].artist;
title.value = artistV[artistName].title;
genre.value = artistV[artistName].genre;
album.value = artistV[artistName].album;
};
artistV[artistName].display();
}
function editT(){
location.reload();
let edited = new Artist(
artist.value,
title.value,
genre.value,
album.value,
);
artistV[document.getElementById('artistList').value] = edited;
sessionStorage.setItem('artists', JSON.stringify(artistV));
}
function removeTrack() {
location.reload();
artistV.splice(document.getElementById('artistList').selectedIndex -1, 1);
document.getElementById('artistList').remove(document.getElementById('artistList').selectedIndex);
sessionStorage.setItem('tracks', JSON.stringify(artistV));
}
<!DOCTYPE html>
<html>
<head>
<title>Music</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body onload="thePage()">
<h1>Artist information</h1>
<br>
<fieldset id="fieldset">
<label for="artistName">Artist name</label><input type="text" id="artist">
<label>Title</label>
<input type="text" id="title">
<label>Genre</label>
<input type="text" id="genre">
<label>Album</label>
<input type="text" id="album">
<button onclick="submitData()">Submit</button>
<button onclick="editT()">Edit</button>
<button onclick="removeTrack()">Remove</button>
</fieldset>
<select id="artistList" onchange="changeArt(this.value)">
<option value="">--Choose a Track--</option>
</select>
<script type="text/javascript" src="music.js"></script>
</body>
</html>
//this is my JS
//this is my JavaScript and this is what i tried to do there are no current errors on the code when i run it but it is not giving the desired out come.
// это мой JavaScript, и это то, что я пытался сделать, в коде нет текущих ошибок, когда я запустить его, но он не дает желаемого результата // это мой JavaScript, и это то, что я пытался сделать, нет никаких текущих ошибок в коде, когда я его запускаю, но он не дает желаемого результата // это мой JavaScript, и это то, что я пытался сделать, нет никаких текущих ошибок в коде, когда я его запускаю, но он не дает желаемого результата