I'm a JS self-learner. I want to make a playlist using select HTML element and a button. I managed to choose and console log the value from the but I can't use it to create the name of an MP3 file. Can anyone give me a hand? I read that var has both local and global scope. Or how can I retrieve the value from the selectTrack function. Sorry if for some of you it may be a trivial question but I'm still on the stage of figuring out the functions in JS.
<div class="playlist-container">
<select class="playlist-selector" onchange="selectTrack()">
<option value="default">default</option>
<option value="track1">Owner of a Lonely Heart</option>
<option value="track2">Somebody's Baby</option>
<option value="track3">Easy Lover</option>
</select>
<button class="play-btn">play</button>
</div>
const playBtn = document.querySelector(".play-btn");
let mySong = ``
function selectTrack() {
var mySongSelected = document.querySelector(".playlist-selector").value;
console.log(mySongSelected);
}
playBtn.addEventListener("click", playTrack);
function playTrack() {
console.log(`${mySongSelected}.mp3`);
}
mySong = mySongSelected
console.log(`${mySong}.mp3`)
…?!let mySongSelected = ''
. Remove thevar
keyword inside selectTrack().