Comment passer un objet à une fonction dans innerHTML (JavaScript)?

Question

Comment puis-je transmettre un objet à une fonction dans innerHTML?

Voici un exemple:

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"); 
} 

Comment puis-je passer cet objet, coord? C'est mon seul autre recours, pour le moment, c'est passer coord.x et coord.y, au lieu de l'objet.

Merci.

Answer 1

Y Vous pouvez utiliser document.createElement au lieu de 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); 

Answer 2

La façon dont vous l'implémentez maintenant, oui - vous créez du HTML sous forme de chaîne, et vous intégrez JavaScript dans cette chaîne; vos options sont limitées.

Et bon sang, utilisez les guillemets simples autour du html var de sorte que vous ne devez pas échapper à tout :(

Answer 3

La façon la plus simple est de créer une image, joindre le gestionnaire d'événements et insérez l'élément en utilisant des méthodes DOM .

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

Notez que cela a une différence au code que vous avez ci-dessus:.. elle ne supprime tous les éléments actuellement en #content pas si cela se produira, vous devrez faire le retrait séparément