I have 2 pages, index.html, and tracklist.html. For my webpage, I want to get an artist’s name and an album name from 2 text boxes on index.html, use those as the parameters for my getAlbumTracks() function, and display the array of tracks on tracklist.html after clicking a search button (button is on index.html).
Below I have my index.html, tracklist.html, and app.js, and as of right now, when I run getAlbumTracks() in the console on tracklist.html with manually inputted parameters, I am able to display the array on the page, like this: https://gyazo.com/af94a5c5966d9c1cbaea74369a35add2 but don’t know how to do it with user input from textboxes on a different page. I’m a bit new to javascript so any help is appreciated, thanks!
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rank It</title>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<form action="tracklist.html">
<div>
<div>
<div class="search">
<input
type="text"
id="album"
class="searchbar"
placeholder="Album Name"
/>
</div>
</div>
<br /><br />
<div>
<div class="search">
<input
type="text"
id="artist"
class="searchbar"
placeholder="Artist's Name"
/>
</div>
</div>
<br /><br />
<div>
<div class="search">
<input type="submit" value="Click" onclick="display" />
</div>
</div>
</div>
</form>
</body>
</html>
tracklist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style2.css" />
<script src="app.js"></script>
<title>Rank It</title>
</head>
<body>
<div class="tracklist">
<div id="arrPrint"></div>
</div>
</body>
</html>
app.js:
async function getAlbumTracks(AlbumName, ArtistName) {
//API that gets json file of album information given artist's name and album name
const response = await fetch("https://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=d94b7d68284cbab1cdb7c2c3c81fd913&artist="
+ ArtistName + "&album=" + AlbumName + "&format=json")
const data = await response.json();
//Declaring numberOfTracks and TrackList array
const numberOfTracks = data.album.tracks.track.length;
const TrackList = [];
//For Loop that gets each song name and puts them in TrackList[]
for (let i = 0; i < numberOfTracks; i++) {
TrackList[i] = data.album.tracks.track[i].name;
}
//All the code below is used to display the tracks with numbers on the webpage
let arrPrint = document.getElementById("arrPrint");
let list = "<ol>";
for (let i = 0; i < numberOfTracks; i++) {
list += "<li>" + TrackList[i] + "</li>";
}
arrPrint.innerHTML = list;
}
//Function that is supposed to take user input and call the getAlbumTracks function but it doesn't work
function displayAlbumTracks() {
let Album = String(document.getElementById("album").value);
let Artist = String(document.getElementById("artist").value);
getAlbumTracks(Album, Artist);
}