无法获取局部变量：JS自制播放列表取值问题求助

你的核心问题是**mySongSelected是selectTrack函数的局部变量，playTrack函数无法访问它**，所以会出现变量未定义的错误。下面给你几种可行的解决方法：

方法1：使用全局变量（符合你提到的作用域思路） #

把mySongSelected声明在函数外部，变成全局变量，这样两个函数都能访问和修改它：

const playBtn = document.querySelector(".play-btn");
let mySongSelected = "default"; // 初始化全局变量

function selectTrack() {
    mySongSelected = document.querySelector(".playlist-selector").value;
    console.log(mySongSelected);
}

playBtn.addEventListener("click", playTrack);

function playTrack() {
    console.log(`${mySongSelected}.mp3`);
}

方法2：直接在播放函数中获取选中值（更推荐，避免全局变量污染） #

不需要依赖onchange事件保存值，点击播放按钮时直接获取当前选中的选项值，逻辑更简洁：

const playBtn = document.querySelector(".play-btn");
// 提前获取select元素，避免重复查询DOM
const playlistSelector = document.querySelector(".playlist-selector");

function playTrack() {
    const selectedValue = playlistSelector.value;
    // 可选：过滤默认选项
    if (selectedValue !== "default") {
        console.log(`${selectedValue}.mp3`);
    } else {
        console.log("请选择一首曲目");
    }
}

playBtn.addEventListener("click", playTrack);

方法3：通过事件对象获取选中值（优化onchange逻辑） #

如果想保留onchange的实时反馈，可以利用事件对象直接获取选中值，不用重复查询DOM：

HTML修改： #

<div class="playlist-container">
  <select class="playlist-selector" onchange="selectTrack(event)">
    <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>

JS修改： #

const playBtn = document.querySelector(".play-btn");
let mySongSelected = "default";

function selectTrack(event) {
    // 通过event.target直接获取触发事件的select元素
    mySongSelected = event.target.value;
    console.log(mySongSelected);
}

playBtn.addEventListener("click", playTrack);

function playTrack() {
    console.log(`${mySongSelected}.mp3`);
}

补充说明： #

• 局部变量（函数内部用var/let/const声明的变量）只能在当前函数内部访问，外部函数无法读取。
• 全局变量虽然好用，但尽量少用，容易造成变量冲突和代码维护问题，方法2是更符合现代JS开发的写法。

内容的提问来源于stack exchange，提问作者TomDev