按 ID 获取元素返回 null答案

【问题标题】：Get element by ID returns null按 ID 获取元素返回 null
【发布时间】：2020-03-08 20:16:39
【问题描述】：

const data = [{color : "red"},{color : "blue"}, {color : "green"} ];

function libraryRoot() {
  load();
  return (`<div id="appDiv">
                    ${data.map(function(value){
                    	return `<div><p>Color ${value.color} from libraryRoot</p>`
                    }).join("")}  
                </div>
              `);
}

window.onload = libraryRoot;

function load() {
  let a = document.getElementById("appDiv");
  console.log(a);
}

let defaultLayout = libraryRoot();
document.getElementById("root").innerHTML = defaultLayout;

<div>
  <div id="root"></div>
</div>

大家好，我按照你们的建议修改了脚本，但第一个实例的返回值仍然打印 null，然后打印 div。你们能帮我解决我哪里出错了。

我想要做的就是调用“appDiv” id 并向其写入按钮功能。喜欢点击{//做某事}。

更新Codepen Project

【问题讨论】：

检查你在做什么以及按什么顺序。第一次调用getElementById 第二次调用return(`<div id="appDiv">... 并将该字符串存储在变量defaultLayout 中，然后使用完全不相关的内容更新#root 的内容。最终window 将被加载并再次调用getElementById。但是您从来没有在文档中添加<div id="appDiv">；尤其是在你尝试getElementById它之前。
哪些元素正在改变？如果“数据”常量发生变化，请尝试以下函数 function load(){ let a=data console.log(a); }
大家好，我看到我正在尝试获取我在根目录中打印之前的内容。对不起代码的混乱，忘记了数组。我想要做的是用这个函数的一些内容更新根 div 内的布局，然后必须能够访问 newDivId 并将一些函数写入这些新 div。我该怎么做请帮忙：
也可以在模板 litreals 中编写函数，如果是这样，那么我的值应该首先返回并且 ID 必须返回一个值。但我不知道该怎么做:(
一个元素必须存在才能获得它。您正在尝试获取尚未创建的元素。

标签： javascript html arrays innerhtml getelementbyid

【解决方案1】：

在将元素写入 DOM 之前，您将无法访问该元素。
注意 document.getElementById() 中的 word 文档。它是文档 API 的一种方法。 DOM 代表文档对象模型。

如果您想在此之前对其进行修改，请将您的字符串文字拆分为不同的部分。将特定变量分配给元素的重要部分。

然后修改它们。将它们连接回一个字符串并将它们添加到 DOM。

您的代码可以使用一些 cmets。有点不清楚您要做什么。在这里，我修改了您的笔，以展示一些不同的方式来处理数据数组中的每种颜色。您可以执行一些条件逻辑并基于此返回不同的模板字符串。您可以使用 onclick 属性轻松地将数据对象属性传递给另一个 javascript 函数。

希望这能帮助你更接近你的目标

const data = [{color : "red"},{color : "blue"}, {color : "green"} ];

function alertFunction(color) {
  alert(color);
}

function libraryRoot(){ 
    return('<div id="appDiv">' +

                  data.map(function(value) {
                    var result = `<div><p>Color ${value.color} from libraryRoot</p>`;
                    if (result.indexOf("red") > -1) { // checking if the div includes red
                      return result;
                    } else if (`${value.color}` == "blue") { // checking if the objects color prop includes blue
                      return "<p>blue</p>";
                    } else {
                      return `<button onclick="alertFunction('${value.color}')">Button with function</button>`;
                    }
                  }).join("")
           
           + "</div>"
          ); 
   }
window.onload = libraryRoot;

document.getElementById("root").innerHTML = libraryRoot();

<div>
  <div id="root"></div>
</div>

【讨论】：

嗨，尼克，您可以分享任何关于模板文字的示例，然后显式调用 load() 函数。我要做的就是调用模板字面量中的数组元素，并在某些条件为真时创建一个新的 div。

【解决方案2】：

第一个问题是您首先调用load()，它试图访问尚不存在的appDiv 节点。所以重新考虑一下顺序。

第二个问题是您从未真正将 appDiv 内容添加到 DOM。您可以使用 document.appendChild(libraryRoot()); 之类的东西，尽管我从未将字符串作为 DOM 节点注入 - 我为此使用 createElement。该链接有一些示例。

【讨论】：

你好 mac，我真的是 javascript 的初学者，你有关于如何在模板文字中定义 load() 函数的任何参考。