Блог

Главная - Вопросы по программированию - Невозможно получить HTML-элемент внутри файла javascript

Невозможно получить HTML-элемент внутри файла javascript

#javascript #html

#javascript #HTML

Вопрос:

Я создал несколько html-элементов (span) внутри javascript с помощью document.createElement , но я не могу добавить прослушиватель событий. Когда я пытаюсь извлечь эти элементы с помощью document.getElementByName("span") , он возвращает пустой список узлов. Я предполагаю, что элементы недоступны при первоначальной загрузке, так как я создаю их позже. Как я могу извлечь их и добавить прослушиватель событий?

script.js

 const items = ["Candles", "Decorations", "Chocolate"]
const checklist = document.getElementById("checklist")
const input = document.getElementById("newele");

function newElement(value){
    let div = document.createElement("div");
    let p = document.createElement("p");
    let span = document.createElement("span");
    
    p.innerText = value;
    
    let i = document.createElement("i");
    i.classList.add("fas", "fa-times");
    span.appendChild(i);
    
    div.classList.add("checklist-item");
    div.appendChild(p);
    div.appendChild(span);
    
    return div;
}

items.forEach((item) => {
    let p = newElement(item);
    checklist.appendChild(p);
});

let icon = document.getElementsByName("span");
console.log(icon);

index.js

 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
      integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV i/6YWSzkz3V"
      crossorigin="anonymous"
    />
    </head>
    <body>
        <h1>Christmas Shopping List</h1>
        <div>
            <label for="newele">Add new item</label>
            <input type="text" id="newele"></input>
        </div>
        <div class="checklist" id="checklist"></div>

        <script src="index.pack.js"></script>
    </body>
</html>

Комментарии:

1. ОПЕЧАТКА! getElementsByName должно быть getElementsByTagName — элементы присутствуют, когда происходит этот вызов, потому что выполняется цикл foreach . — Используемый вами метод ищет элементы, имеющие name атрибут со значением span … Посмотрите на разницу ^

2. большое вам спасибо!

Ответ №1:

Проблема связана с используемым вами методом выбора. Вы должны использовать getElementsByTagName(«span»); вместо document.getElementsByName(«span»);

Ответ №2:

как уже было правильно указано, небольшая ошибка. Но, возможно, было бы интереснее использовать другую функцию выбора. Если вы выбираете через имя тега, вы получаете коллекцию. Это означает, что вам все равно придется работать с ключом, чтобы обратиться к нужному элементу. если у вас есть только один элемент span, тогда это будет [0] . Но тогда моим любимым методом будет querySelector. Взгляните на этот небольшой пример:

 const span1 = document.getElementsByTagName('span');    
console.log(span1[0]);
const span2 = document.querySelector('span');
console.log(span2) 
 <span>hello</span>
Метки: