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

Javascript客户端包括不在Onclick事件上注入

1 个答案: