JavaScript客戶端包含未注射的onclick事件

Question

我工作的JavaScript客戶端包括和我使用此代碼：

window.onload = function() { 
    var elements = document.getElementsByTagName('*'), 
     i; 
    for (i in elements) { 
     if (elements[i].hasAttribute && elements[i].hasAttribute('data-include')) { 
      fragment(elements[i], elements[i].getAttribute('data-include')); 
     } 
    } 
    function fragment(el, url) { 
     var localTest = /^(?:file):/, 
      xmlhttp = new XMLHttpRequest(), 
      status = 0; 

     xmlhttp.onreadystatechange = function() { 
      /* if we are on a local protocol, and we have response text, we'll assume 
*     things were sucessful */ 
      if (xmlhttp.readyState == 4) { 
       status = xmlhttp.status; 
      } 
      if (localTest.test(location.href) && xmlhttp.responseText) { 
       status = 200; 
      } 
      if (xmlhttp.readyState == 4 && status == 200) { 
       el.outerHTML = xmlhttp.responseText; 
      } 
     } 

     try { 
      xmlhttp.open("GET", url, true); 
      xmlhttp.send(); 
     } catch(err) { 
      /* todo catch error */ 
     } 
    } 
} 

這上面的代碼工作真的很好，當頁面加載到包括外部.html文件，使用以下語法：

<div id="myid" data-include="templates/myExternalTemplate.html"></div> 

上述模板將被加載到頁面中。

當我嘗試的模板從一個到另一個使用onclick事件改變我的問題來了：

<div onclick="changeTemplate();"></div> 

我曾嘗試：

function changeTemplate() { 
document.getElementById("myid").setAttribute("data-include","templates/2.html"); 
} 

以上函數返回以下錯誤：

*TypeError: document.getElementById(...) is null* 

我該如何做這項工作？

Answer 1

首先，你需要給你的div一個id。

<div id="myId" data-include="templates/myExternalTemplate.html"></div> 

此外，您function關鍵字不應資本：

function changeTemplate() { 
    document.getElementById("myId").setAttribute("data-include","templates/2.html"); 
}