Variable basierend auf Funktionsargument erhalten?

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() 
} 

Okay, so habe ich diesen oben genannten Code (Dies ist eine vereinfachte Version). Diese Funktion setzt e in getMusic(e) entweder auf s01 oder s02. Ich muss in der Lage sein, die Variable aufzurufen, die diesem Namen entspricht (innerhalb der alert()), aber ich bin nicht einmal sicher, wo ich anfangen soll. Jede Hilfe wird geschätzt, danke!

---

P.S. jede Chance, ich kann die onclick="" aus der HTML-Datei entfernen und durch eine addEventListener in der JS-Datei ersetzen und immer noch den gleichen Effekt erzielen? Ich mag es nicht, meine Skripte so zu mischen.

Answer 1

Wenn Sie ein Objekt verwenden, um Ihre Daten zu halten, ist es viel einfacher

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

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

Wenn Sie addEventListener Sie die Inline entfernen javascript auch

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

Zunächst einmal, um Ihre zweite Frage zu beantworten, ja, können Sie den Event-Listener in Ihrem JS:

012 registrieren

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

Sobald Sie Ihre Event-Handler haben auf diese Weise registriert sind, können Sie die id der Schaltfläche erhalten, indem e.target.id erreichbar.

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

An diesem Punkt haben Sie eine Zeichenfolge, die die id enthält; Jetzt müssen Sie in der Lage sein, die Werte zu ziehen, die dem id entsprechen. Es ist am sinnvollsten, einen JSON-Beutel mit Hashes entsprechend id zu definieren.

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

Answer 3

In JavaScript, das window Objekt vorhanden ist, die enthält alle globalen Variablen.

einfach window[e] verwenden Ihren Arrays Wert zu erhalten:

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>