関数の引数に基づいて変数を取得しますか？

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をs01またはs02のいずれかに設定します（getMusic(e)）。その名前に対応する変数（alert()内）を呼び出せるようにする必要がありますが、どこから開始するかはわかりません。どんな助けでも感謝しています！

---

P.S.私は onclick=""をHTMLファイルから削除し、それをjsファイルの addEventListenerに置き換えても同じ効果を達成できますか？私はそのようなスクリプトを混ぜるのは好きではありません。

Answer 1

、あなたのデータを保持するオブジェクトを使用している場合、それはあなたが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

インラインを削除することができます

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

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

はるかに簡単です最初に、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バッグを定義するのが最も理にかなっています。

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>