Get element by ID returns null

Question

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>

Hi Guys i modified the script as you guys suggested, but still the return value at the first instance prints null, and then it prints the div.can you guys help me where im going wrong.

All i wanted to do is i want to call the "appDiv" id and wirte a button funcion to it. like on click {//do something}.

updated Codepen Project

Answer 1

You won't be able to access the element until it's written to the DOM.
Notice the word document in document.getElementById(). It's a method of the document API. DOM stands for Document Object Model.

If you want to modify it before then then split your string literal into different pieces. Assign specific variables to important parts of the element.

Then modify them. Concatenate them back into one string and add them to the DOM.

Your code could use some comments. It's a little unclear what you're trying to do. Here I've modified your pen to show some different ways to handle each color in your data array. You can do some conditional logic and return different template strings based on that. You could easily pass data object properties to another javascript function using the onclick attribute.

Hopefully this helps you get closer to your goal

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>