Как считать из span с помощью textContext

16 марта 2021, 11:10

Подскажите, почему при попытке считать textContent из span, выдает ошибку:

Cannot read property 'textContent' of null

Хотя на stackoverflow и других онлайн редакторах ошибки нет. Нужно считать то что внутри тега <span>, как это можно сделать? Вот пример:

var a = document.getElementById('s').textContent; 
console.log(a);

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link rel="stylesheet" href="style.css"> 
	<script src="main.js"></script> 
</head> 
<body> 
<span id="s">5</span> 
</body> 
</html>

Answer 1

Браузер начинает выполнять такой скрипт, как только его загрузит.

На момент выполнения скрипта элемент на странице еще не существует.

Вариантов решения несколько:

—

Поместите скрипт после создания тега <span>:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<span id="s">5</span>
<script src="main.js"></script>
</body>
</html>

—-

Дождитесь загрузки страницы:

document.addEventListener("DOMContentLoaded", function() {
    var a = document.getElementById('s').textContent;
    console.log(a);
});

—-

Использовать <script async> или <script defer> , однако такие скрипты выполняются сразу после загрузки и я так понимаю что в общем случае не факт что страница к этому моменту прогрузится полностью, однако я не встречал такого поведения...