innerHTML (JavaScript)에서 함수에 객체를 전달하는 방법은 무엇입니까?

Question

innerHTML에서 함수에 객체를 전달하는 방법은 무엇입니까?

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

가 어떻게이 개체, COORD를 전달할 수 있습니다 여기에

은 예입니다? 현재 나의 유일한 다른 수단은 객체 대신 coord.x와 coord.y를 전달하는 것입니다.

감사합니다.

Answer 1

와이 ou는 innerHTML 대신 document.createElement을 사용할 수 있습니다.

// 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

지금 구현하는 방법, 예 - HTML을 문자열로 생성하고 해당 문자열 내에 JavaScript를 포함합니다. 당신의 선택은 제한되어 있습니다. 당신은 탈출 할 필요가 없습니다

그리고 이런는 html VAR의 주위에 작은 따옴표를 사용하는 모든 :(

Answer 3

가장 간단한 방법은 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);  
} 

참고 :.이 #content 현재 어떤 요소를 제거하지 않는 일이 일어날 경우, 별도로 제거를해야 할 것을