0

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

Alright so I have this code above (This is a simplified version). This function will set e in getMusic(e) to either s01 or s02. I need to be able to call the variable that corresponds to that name (within the alert()) but I'm not even sure where to start. Any help is appreciated, thanks!

P.S. any chance I can remove the onclick="" from the HTML file and replace it with an addEventListener in the js file and still achieve the same effect? I don't like mixing my scripts like that.
Austin Griner
  • 169
  • 2
  • 6

3 Answers3

3

If you use an object to hold your data, it's a lot easier

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

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

If you use addEventListener you can remove the inline javascript as well

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>
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • OP does not need to change his data type. The built-in `window` object presents this data in exactly the same way, i.e. `window["s01"]`. – Toastrackenigma Jul 19 '17 at 22:11
  • @Toastrackenigma - That's why I suggest using an object, adding globals, and assuming the variables are in fact global, is bad practice. – adeneo Jul 19 '17 at 22:14
1

First off, to answer your second question, yes, you can register the event listener in your JS:

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

Once you have your event handler registered that way, you can get the id of the button by accessing e.target.id. 

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

At this point, you have a string containing the id; now you need to be able to pull the values that correspond to the id. It makes the most sense to defined a JSON bag with hashes corresponding to id.

var data = {
  s01: ["your", "data"],
  s02: ["your", "other", "data"]
}
function getMusic(e){
  myData = data[e.target.id]
  alert(myData)
}
Ezra Chu
  • 832
  • 4
  • 13
  • There are at least two problems with your answer. Firstly, you can't call `addEventListener` on a nodeList, and secondly, `e.target` isn't neccessarely the element bound in the handler. – adeneo Jul 19 '17 at 22:06
  • yep, noticed those issues as well. thanks for the heads up. edited. – Ezra Chu Jul 19 '17 at 22:10
-2

In JavaScript, the window object exists, which contains all global variables.

Simply use window[e] to get your array's value:

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>
Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55