javascript - 根据函数参数获取变量？

Question

HTML:

<button id="s01" onclick="getMusic(this.id)"></button>
<button id="s02" onclick="getMusic(this.id)"></button>

JavaScript:

var s01 = ["file", "song"];
var s02 = ["file", "song"];

function getMusic(e){
    alert()
}

好吧，我上面有这段代码(这是一个简化版本)。该函数将设置 e在getMusic(e)到 s01或s02 。我需要能够调用与该名称对应的变量(在 alert() 内)，但我什至不知道从哪里开始。任何帮助表示赞赏，谢谢!

<小时/> 附:有机会我可以删除 onclick=""从 HTML 文件中将其替换为 addEventListener在js文件中仍然达到相同的效果吗？我不喜欢这样混合我的脚本。

Answer 1

如果您使用对象来保存数据，那就容易多了

var data = {
   s01 : ["file", "song"],
   s02 : ["file", "song"]
};

function getMusic(e){
    console.log(  data[e]  );
}

如果您使用addEventListener，您也可以删除内联 JavaScript

var data = {
  s01 : ["file1", "song"],
  s02 :["file2", "song"]
}

document.querySelectorAll('.btn').forEach(function(el) {
  el.addEventListener('click', function() {
    console.log( data[this.id] );
  });
});

<button id="s01" class="btn">Test 1</button>
<button id="s02" class="btn">Test 1</button>