Получить элемент по идентификатору возвращает ноль

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>

Привет, ребята! Я изменил сценарий, как вы, ребята, предложили, но все же возвращаемое значение в первом случае печатает ноль, а затем печатает div.can вы ребята, помогите мне, где я иду не так.

Все, что я хотел сделать, это я хочу позвонить идентификатору "appDiv" и написать функцию кнопки к нему. как при нажатии {// сделать что-то}.

обновлено Codepen Project

Answer 1

Первая проблема заключается в том, что вы сначала вызываете load(), который пытается получить доступ к узлу appDiv, который еще не существует. Поэтому переосмыслите порядок.

Вторая проблема заключается в том, что вы фактически никогда не добавляли контент appDiv в DOM. Вы можете использовать такие вещи, как document.appendChild(libraryRoot()); или что-то подобное, хотя я никогда не вставлял строку в качестве узла DOM - для этого я использую createElement . Ссылка имеет несколько примеров.

Answer 2

Вы не сможете получить доступ к элементу, пока он не будет записан в DOM.
Обратите внимание на слово document в document.getElementById (). Это метод документа API. DOM расшифровывается как объектная модель документа.

Если вы хотите изменить его раньше, то разбейте строковый литерал на разные части. Назначьте указанные c переменные для важных частей элемента.

Затем измените их. Объедините их обратно в одну строку и добавьте их в DOM.

Ваш код может использовать некоторые комментарии. Немного неясно, что ты пытаешься сделать. Здесь я изменил ваше перо, чтобы показать несколько разных способов обработки каждого цвета в вашем массиве данных. Вы можете сделать некоторые условные логики c и возвращать различные строки шаблона, основываясь на этом. Вы можете легко передать свойства объекта данных другой функции javascript, используя атрибут onclick.

Надеемся, это поможет вам приблизиться к цели

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>