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.
Solution 1 :
Problem :
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]
Comments
Comment posted by Charu Rajput
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.
Comment posted by stackoverflow.com/questions/6232331/…
Do you have it on server or local ? Session storage may not work on local, cookies – may(?) –