How can I pass an object to a function in innerHTML (JavaScript)?

Question

How can I pass an object to a function in innerHTML?

Here is an example:

function clickme()
{
  var coord = {x:5, y:10};
  testimageih(coord);
}

function testimageih(coord)
{
  var html = "<img id=\"sam1\" border=\"0\" name=\"sam1\" src=\"sample.gif\" " +
             "onLoad=\"ImageOnLoad(" + coord + ");\"></img>";
  document.getElementById("content").innerHTML = html;

}

function ImageOnLoad(coord)
{
  if (coord) alert("Success"); 
  else alert("Fail");
}

How can I pass this object, coord? It's my only other recourse, at the moment, is passing coord.x and coord.y, instead of the object.

Thank you.

lonesomeday · Accepted Answer · 2011-10-12 16:30:21Z

4

The simplest way is to create an image, attach the event handler and insert the element using DOM methods.

function testimageih(coord)
{
  var img = document.createElement('img');
  img.id = 'sam1';
  img.border = 0;
  img.name = 'sam1';
  img.src = 'sample.gif';
  img.onload = function() {
    ImageOnLoad(coord);
  };

  document.getElementById('content').appendChild(img);    
}

Note that this has one difference to the code you have above: it doesn't remove any elements currently in #content. If that will happen, you will have to do the removal separately.

answered Oct 12, 2011 at 16:30

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

Comments

Peter-Paul van Gemerden · Accepted Answer · 2011-10-12 17:14:47Z

1

You could use document.createElement instead of innerHTML.

// Create the element
var element = document.createElement('img');
element.setAttribute('border', 0);
element.setAttribute('name', 'sam1');
element.setAttribute('src', 'sample.gif');

// Attach onLoad handler to it (passing it the object)
element.onload = function() { ImageOnLoad(coord) };

// Replace the contents of your... div?
var content = document.getElementById("content")
content.innerHTML = '';
content.appendChild(element);

edited Oct 12, 2011 at 17:14

answered Oct 12, 2011 at 16:32

Peter-Paul van Gemerden

7,02933 silver badges37 bronze badges

Comments

Dave Newton · Accepted Answer · 2011-10-12 16:23:04Z

1

The way you are implementing it now, yes--you're creating HTML as a string, and embedding JavaScript within that string; your options are limited.

And geez, use single-quotes around the html var so you don't have to escape everything :(

answered Oct 12, 2011 at 16:23

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

Collectives™ on Stack Overflow

How can I pass an object to a function in innerHTML (JavaScript)?

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