根據函數參數獲取變量？

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()內），但我甚至不知道從哪裏開始。任何幫助表示讚賞，謝謝！

---

P.S.任何機會，我可以從HTML文件中刪除 onclick=""，並用js文件中的 addEventListener取代它，仍然達到相同的效果？我不喜歡混合我的腳本。

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>

Answer 2

首先，回答你的第二個問題，是的，你可以在JS中註冊事件監聽器：

document.querySelectorAll("input[type=button]").forEach(function(el){ 
    el.addEventListener("click", getMusic) 
}) 

一旦你有你的事件處理程序註冊的那個樣子，你可以通過訪問e.target.id獲得按鈕的id。

function getMusic(e){ 
    alert(e.target.id) // will alert with button id 
} 

在這一點上，你有一個字符串包含id;現在您需要能夠取得對應於id的值。最有意義的是定義一個帶有對應於id的哈希的JSON包。

var data = { 
    s01: ["your", "data"], 
    s02: ["your", "other", "data"] 
} 
function getMusic(e){ 
    myData = data[e.target.id] 
    alert(myData) 
} 

Answer 3

在JavaScript中，存在window對象，其中包含所有全局變量。

只需使用window[e]讓你的數組的值：

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

 
function getMusic(e){ 
 
    alert(window[e]) 
 
}

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