-1

This is my html and my JavaScript is below in my html this is what i did please help me solve this problem i have been struggling for a couple of days not and i really don't know what i am doing wrong this is my html and my JavaScript is below 

let artistV = [];

function myPage() {
  // body...
  let htmlSelect = document.getElementById("artistList");
  htmlSelect.style.visibility = "hidden";

  if (sessionStorage.getItem("hasCodeRunBefore") === null) {
    let arrayArt = [];
    sessionStorage.setItem("artists", JSON.stringify(artistV));
    sessionStorage.setItem("hasCodeRunBefore", true);

  } else {
    artistV = JSON.parse(sessionStorage.getItem("artists"));
    let i = 0;
    artistV.forEach(function(art) {
      let listItems = document.createElements("li");
      listItems.innerHTML = art.name.artist;
      listItems.value = i;
      i = i + 1;
      htmlSelect.appendChild(listItems);
    });
    if (i > 0) {
      htmlSelect.style.visibility = "visible";
    }
  }
}

function Artist(name, title, genre, album) {
  // body...
  this.name = name;
  this.title = title;
  this.genre = genre;
  this.album = album;

}

function submit() {
  // body...
  artistV = JSON.parse(sessionStorage.getItem("artists"));
  let newArtist = new Artist(
    document.getElementById("name").value,
    document.getElementById("title").value,
    document.getElementById("genre").value,
    document.getElementById("album").value
  );
  artistV.push(newArtist);
  sessionStorage.setItem("artists", JSON.stringify(artistV));
}



function userInput(artistInfo) {
  // body...
  artistV[artistInfo].bio = function() {
    document.getElementById("artistList").innerHTML = "<li value=''>"
    this.name + 'Title is' + this.title + 'Genre is' + this.genre + 'Album is'
    this.album + "</li>";
  };
  artistV[artistInfo].bio();
}
<!DOCTYPE html>
<html>

<head>
  <title>Music</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script type="text/javascript" src="music.js"></script>
</head>

<body onload="myPage()">
  <h1>Artist information</h1>
  <br>
  <form>
    <label for="artistName">Artist name</label><input type="text" id="name" required>
    <label>Title</label><input type="text" id="title" required>
    <label>Genre</label><input type="text" id="genre" required>
    <label>Album</label><input type="text" id="album" required>
    <button id="btn" onclick="submit()">Submit</button>
  </form>
  <ul id="artistList" onchange="userInput(this.value)">
    <li value=""></li>

  </ul>
</body>

</html>

this is my JavaScript and i am not quite sure why it is not working to save what the user inputs on

[help], [help/on-topic]

Jan
  • 2,178
  • 3
  • 14
  • 26
  • Welcome to the community. When we try to run your code it gives and error. Please add missing code here and also your question is not clear. Could you please explain what you are trying to achieve here. – Charu Rajput Apr 20 '20 at 15:24
  • still doesnt work –  Apr 20 '20 at 19:59
  • Do you have it on server or local ? Session storage may not work on local, cookies - may(?) - https://stackoverflow.com/questions/6232331/setting-cookies-using-javascript-in-a-local-html-file ? – Jan Apr 20 '20 at 20:38

1 Answers1

0

Try renaming submit() function in your script to something else(say submitData). Submit() method is inbuilt method which is used to submit the form to server.

ajay gandhi
  • 545
  • 4
  • 13