Блог

Главная - Вопросы по программированию - Неперехваченная ошибка типа: Не удается прочитать свойства null (чтение «appendChild»)

Неперехваченная ошибка типа: Не удается прочитать свойства null (чтение «appendChild»)

#javascript #html #css

Вопрос:

Я пытаюсь вставить новый Div и img внутрь этого div через JS. Я создал класс, которым я буду пользоваться позже, с функцией внутри, которую следует вызвать, чтобы использовать эту функцию и вставить изображение. При этом я постоянно получаю Uncaught TypeError: Cannot read properties of null (reading 'appendChild') HTML и JS ниже:

 <!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Actividad 3</title>
<script type="text/javascript" src="actividad3.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">


<body >
<h2>EXTRAS DISPONIBLES</h2>

    
</body>
</html>

JS

 class extra {
    precio = "10€";
    url = "concha_azul.jpeg";
    constructor(precio, url) {
        this.precio = precio;
        this.url = url;
    }
    getHTML = function () {
        console.log("hello");
        var newDiv = document.createElement("div");
        newDiv.id = "x";
        var div = document.getElementById("x");
        var img = document.createElement("img");
        img.src = "concha_azul.jpeg";

        div.appendChild(img); 
    }
    
}

let miExtra = new extra();
miExtra.getHTML();

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

1. Почему у вас такая линия var div = document.getElementById("x"); ?? Пока вы не добавите его в dom, вы не сможете получить это свойство.. Попробуйте что-нибудь в этом newDiv.appendChild(img); роде ..

Ответ №1:

Когда вы пытаетесь захватить элемент ‘newDiv’ по его идентификатору, он еще не существует в HTML-документе. Сначала вам нужно добавить элемент newDiv на страницу, а затем вы можете получить его по идентификатору…

  //Create new div
 var newDiv = document.createElement("div");
 newDiv.id = "x";

 //Add div to html body
 document.body.appendChild(newDiv);

 //Get new div by it's id
 var div = document.getElementById("x");
 var img = document.createElement("img");
 img.src = "concha_azul.jpeg";
 div.appendChild(img);

Кроме того, чтобы все было проще, вы могли бы просто сделать это…

  //Create new div
 var newDiv = document.createElement("div");
 newDiv.id = "x";

 //Add div to html body
 document.body.appendChild(newDiv);

 //Add an image element to the div
 var img = document.createElement("img");
 img.src = "concha_azul.jpeg";
 newDiv.appendChild(img);

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

1. Я пробовал это и все еще получаю неперехваченную ошибку типа: Не удается прочитать свойства null (чтение «appendChild»), но теперь для document.body.appendChild(newDiv);

2. @SamuelVanBladel — Это «actividad3.js» где находится ваш дополнительный класс? Если это так, то основная часть страницы и ее элементы еще не загружены, поэтому «document.body» вернет значение null. Скрипт должен будет находиться под тегом body.

3. Да, так и есть. Теперь я переместил его в нижнюю часть тега тела, и это сработало. Пробовал под биркой на теле, но это было запрещено. Большое — большое спасибо!

Метки: