如何在模板元素中使用 .innerHTML

Question

我正在制作一個帶有框架的應用程序，該框架大量使用 HTML 中的模板。 一切都很順利，直到我遇到了這個問題：

Uncaught TypeError: Cannot read property 'querySelector' of null

如果我錯了，請糾正我，但我認為這與我使用模板的代碼本身有關，而 JavaScipt 無法讀取該模板的內部。

這是我的代碼的一個縮影版本，我遇到了錯誤。

HTML

<template id="main.html">
     <p id="paragraph">This text needs to be changed in 
     JS</p>
     <button onclick=example()>Click ME!</button>
</template>

JavaScript

 function example (){
 document.getElementById("paragraph").innerHTML = "This text has been changed!"}

錯誤：

 Uncaught TypeError: Cannot read property 'innerHTML' 
 of null

有沒有辦法避免這個錯誤？

Answer 1

1) 默認不渲染模板元素內容

您可以根據需要多次重復使用模板元素中的內容，但您需要使用 Javascript 手動指定。 如果您不使用任何 Javascript 來呈現您的模板元素，它將在 DOM 中不可見。 導致您的代碼找不到段落（位於模板元素中）。

2) 確保在加載 DOM 后調用 Javascript

網頁從上到下加載。 如果你沒有將你的 Javascript 代碼放在你的 body 標簽的底部，或者手動說它需要在 DOM 准備好后加載，你的代碼會嘗試在該元素存在之前找到該元素。

3）你的代碼有一些小錯誤，比如缺少段落等。

使用一個好的編輯器解決這個問題。

此示例代碼向您展示了如何完成：

Javascript：

function example() {
    document.getElementById("paragraph").innerHTML = "This text has been changed!";
}


function init() {
    //Get the template-element by id
    let mainTemplate = document.getElementById("main");
    //Create a new div-element to hold template content
    let parent = document.createElement("div");

    //IMPORTANT!
    //Cloning template content into HTML DOM so it's visible.
    //This part - content.cloneNode - makes your template content visible after being appended to the body, or another legal element in the DOM.
    parent.append(mainTemplate.content.cloneNode(true));

    //Append to body
    document.body.append(parent);
}   

//After dom is ready: Launch init function
document.onload = init();

HTML：

<template id="main">
     <p id="paragraph">This text needs to be changed in 
     JS</p>
     <button onclick="example()">Click ME!</button>
</template>

工作 JSFiddle： https ://jsfiddle.net/ovc1mrs2/

您可能希望將模板的內容直接附加到正文或其他元素。

Answer 2

我想你只是忘了在“函數示例”之后加上“()”。

 function example() { document.getElementById("paragraph").innerHTML = "This text has been changed!"}

 <p id="paragraph">This text needs to be changed in JS</p> <button onclick=example()>Click ME!</button>

Answer 3

在 js 中的示例后添加“()”。

更新的 Javascript 代碼：

function example () { document.getElementById("paragraph").innerHTML = "This text has been changed!" };