Как исправить ошибку "Cannot set properties of null (setting 'innerHTML')" в JavaScript?

Question

Валентина

javascript

Как исправить ошибку "Cannot set properties of null (setting 'innerHTML')" в JavaScript?

Добрый день, уважаемые коллеги. Я изучаю JavaScript по самоучителю и столкнулся с проблемой в следующем коде: 

<pre><code class="javascript">let book = {
		title : 'Война и мир',
		author: 'Лев Толстой',
		year: 1869
	};
	let output = '';
	let values = Object.values(book);
	
	for (let value of values) {
		output += value + '&lt;br&gt;';
	}
	document.getElementById('output').innerHTML = output;</code></pre> 

При выполнении появляется ошибка: "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')" на строке 44 файла sv.php. 

Мой JS код размещен внутри HTML документа. Вот структура HTML файла:

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang="ru"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Перебор свойств&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;script&gt;
let book = {
		title : 'Война и мир',
		author: 'Лев Толстой',
		year: 1869
	};
	let output = '';
	let values = Object.values(book);
	
	for (let value of values) {
		output += value + '&lt;br&gt;';
	}
	document.getElementById('output').innerHTML = output;
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

Я скопировал код, но ошибка продолжает появляться. Как можно решить эту проблему?

22 апреля 2025 г. 15:35

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ошибка "Cannot set properties of null (setting 'innerHTML')" возникает, когда вы пытаетесь получить элемент с ID `output`, который не существует в вашем документе. В вашем коде нет элемента с ID `output`, поэтому метод `document.getElementById('output')` возвращает `null`, что и вызывает ошибку.

Чтобы исправить эту проблему, просто добавьте элемент с необходимым ID в ваш HTML-код. 

Вот исправленный код с добавленным элементом `<div>`:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Перебор свойств</title>
</head>
<body>
    <div id="output"></div> <!-- Здесь добавляем элемент с ID "output" -->

    <script>
        let book = {
            title : 'Война и мир',
            author: 'Лев Толстой',
            year: 1869
        };
        let output = '';
        let values = Object.values(book);
        
        for (let value of values) {
            output += value + '<br>'; // немножко поправил `<br>` для правильного HTML
        }
        document.getElementById('output').innerHTML = output;
    </script>
</body>
</html>
```

Теперь код будет корректно работать, и вы увидите значения свойств объекта `book` в элементе `div` с ID `output`.

Answer 2

RTFM: <a href="https://developer.mozilla.org/ru/docs/Web/API/Document/getElementById#%D0%B2%D0%BE%D0%B7%D0%B2%D1%80%D0%B0%D1%89%D0%B0%D0%B5%D0%BC%D0%BE%D0%B5_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5" rel="nofollow">Document -&gt; document.getElementById()</a> <br/> <blockquote>ссылка на объект типа Element соответствующий указанному ID или <b>null, если элемент с указанным ID не найден в документе</b>.</blockquote>