Javascript can't find array from function argument

Question

I want the JavaScript to find the item information depending on item you clicked on, instead of making a new function for each item.

I am trying to do this by passing id into the JavaScript function as an argument, but that can't find the variable/array.

When you run the code it outputs spikes in the console, but it doesn't work when trying find the array.z

I have also tried using value instead of id, but that just does the same.

JSFiddle: http://jsfiddle.net/b2h0bo29/

var withspike = document.getElementById('withspike');
var withid = document.getElementById('withid');
var spikes = {name:"Spikes", description:"Do not eat me.", damage:"500" };

function itemClicked(id) {
	console.log(id);
	document.getElementById('withspike').innerHTML = spikes["description"];
    document.getElementById('withid').innerHTML = id["description"];
}

<style>
  #spikes {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #FF0000;
}
</style>

<div id="withspike"></div>
<div id="withid"></div>
<div onclick="itemClicked(id)" id="spikes"></div>

id in function caller is a string, or undefined in some browsers (in onclick attribute). — Teemu
– Teemu, Commented Aug 31, 2015 at 12:15

Me.Name · Accepted Answer · 2015-08-31 12:25:13Z

3

You could put spikes (and future other elements) in a containing object, and use id to obtain it from there:

var elements = {
   spikes:{name:"Spikes", description:"Do not eat me.", damage:"500" }
};

call

elements[id]["description"];

Fiddle

And an extra example with multiple elements (and using this versus id in the function call) :

Fiddle2

edited Aug 31, 2015 at 12:25

answered Aug 31, 2015 at 12:17

Me.Name

12.6k3 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

netrevisanto · Accepted Answer · 2015-08-31 12:16:35Z

0

you shoud use this, to pass the element itself, and traverse to the dom element that you want.

For example, with:

<div id="withspike"></div>
<div id="withid"></div>
<div onclick="itemClicked(this)" id="spikes"></div>

You could use this function:

function itemClicked(el) {
       var id = el.previousSibling.innerHTML; // Get previous sibling
       console.log(id);       
}

Thanks!

Edit. Sorry, i used id, while i meant to use this!

edited Aug 31, 2015 at 12:16

answered Aug 31, 2015 at 12:16

netrevisanto

1,12112 silver badges13 bronze badges

Comments

Halcyon · Accepted Answer · 2015-08-31 12:17:54Z

0

It might be smart to avoid mixing HTML and JavaScript. You can do this:

<div id="spikes"></div>

<script>
  var spikes = document.getElementById("spikes");
  spikes.addEventListener("click", function () {
    itemClicked(spikes);
  });
</script>

answered Aug 31, 2015 at 12:17

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Collectives™ on Stack Overflow

Javascript can't find array from function argument

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related