检索本地变量失败

Question

我是一个JS自学者。我想用select HTML元素和一个按钮制作一个播放列表。我设法从中选择并控制台记录了值，但我不能用它来创建MP3文件的名称。有人能帮我一把吗？我读到var既有局部作用域，也有全局作用域。或者如何从selectTrack函数中检索值。很抱歉，对你们中的一些人来说，这可能是一个微不足道的问题，但我仍在研究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`);
}

Answer 1

我删除了onchange和selectTrack函数，然后将mySong声明为未定义，并在playTrack中用queryselector.value作为其值对其进行初始化。现在看来效果不错。

HTML

<div class="playlist-container">
<select class="playlist-selector" >
<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>

Javascript

const playBtn = document.querySelector('.play-btn')
let mySong;
playBtn.addEventListener('click', playTrack)
function playTrack() {
mySong = document.querySelector('.playlist-selector').value
console.log(`${mySong}.mp3`)
}