10、构建交互式音乐播放列表应用

构建交互式音乐播放列表应用

在当今的网页开发中，构建交互式应用是非常重要的。本文将详细介绍如何创建一个简单的音乐播放列表应用，让用户可以输入歌曲名称并将其添加到列表中。

1. 为按钮添加点击事件处理程序

首先，我们需要为“添加歌曲”按钮添加一个点击事件处理程序。这样，当用户点击按钮时，我们就可以执行相应的代码。

window.onload = init;
function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}
function handleButtonClick() {
    alert("Button was clicked!");
}

上述代码的执行流程如下：
1. window.onload = init; ：确保页面完全加载后再执行 init 函数。
2. init 函数：通过 document.getElementById 获取按钮元素，并将其 onclick 属性设置为 handleButtonClick 函数。
3. handleButtonClick 函数：当按钮被点击时，弹出一个提示框，显示“Button was clicked!”。