Чому я отримую помилку або Uncaught TypeError: Не вдається встановити для властивості 'innerHTML' значення null? Я думав, що розумію innerHTML і працював раніше.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
Відповіді:
Ви повинні розмістити hellodiv перед сценарієм, щоб він існував під час завантаження сценарію.
Спробуємо спочатку зрозуміти першопричину того, чому це відбувається в першу чергу.
Чому я отримую помилку або Uncaught TypeError: Не вдається встановити для властивості 'innerHTML' значення null?
Браузер завжди завантажує весь HTML DOM зверху вниз. Будь-який код JavaScript, написаний всередині scriptтегів (присутній у headрозділі вашого HTML-файлу), виконується механізмом візуалізації браузера ще до того, як завантажується весь DOM (різні теги елементів HTML, що містяться в тезі body). Сценарії, присутні в headтезі, намагаються отримати доступ до елемента, що має ідентифікатор, helloще до того, як він фактично був відображений у DOM. Очевидно, що JavaScript не побачив елемент, і, отже, ви в кінцевому підсумку бачите нульову помилку посилання.
Як ви можете змусити це працювати як раніше?
Ви хочете показати повідомлення "привіт" на сторінці, як тільки користувач вперше потрапить на вашу сторінку. Тому вам потрібно підключити свій код в той момент, коли ви повністю впевнені в тому, що DOM повністю завантажений, а helloелемент id доступний / доступний. Це можна досягти двома способами:
helloелемент id, уже завантажений. Ви можете досягти цього, просто перемістивши тег сценарію після всіх елементів DOM, тобто внизу, де bodyтег закінчується. Оскільки рендеринг відбувається зверху вниз, то ваші сценарії в кінці виконуються, і у вас не виникає помилок. <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>window.onloadподії, що дає вам підказку про те, що браузер закінчив завантаження DOM. Тож до моменту запуску цієї події ви можете бути впевнені, що ваш елемент із helloідентифікатором, вже завантаженим у DOM, і будь-який запущений після цього JavaScript, який намагається отримати доступ до цього елемента, не зазнає невдачі. Отже, ви робите щось на зразок нижчого фрагмента коду. Зверніть увагу, що в цьому випадку ваш сценарій працює, навіть якщо він присутній у верхній частині вашого HTML-документа всередині headтегу.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type ="text/javascript">
window.onload = function() {
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
}
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>Частина JavaScript повинна запускатися після завантаження сторінки, тому рекомендується розміщувати сценарій JavaScript у кінці тегу body.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>Javascript виглядає добре. Спробуйте запустити його після завантаження div. Спробуйте запустити лише тоді, коли документ готовий. $(document).readyу jquery.
window.onloadможе бути достатньо, але є й інші події. Посилання на MDN на window: developer.mozilla.org/en-US/docs/Web/API/Window
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = '<p>hi</p>';
};
</script>
</body>
</html>Ось мій фрагмент спробуйте. Я сподіваюся, це допоможе вам.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>Основною причиною є: HTML на сторінці повинен бути завантажений перед кодом javascript . Вирішення двома способами:
1) Дозволити завантаження HTML перед js-кодом.
<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
}
</script>
//or set time out like this:
<script type ="text/javascript">
setTimeout(function(){
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
}, 50);
//NOTE: 50 is milisecond.
</script>
2) Перемістіть код js під HTML-код
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>У мене була та сама проблема, і виявляється, що нульова помилка була тому, що я не зберегв html, з яким працював.
Якщо елемент, про який йдеться, не був збережений після завантаження сторінки, означає "нуль", оскільки документ не містить його на момент завантаження. Використання window.onload також допомагає налагоджувати.
Сподіваюсь, це було вам корисно.
Ця помилка може з'явитися, навіть якщо ви завантажуєте свій сценарій після завершення обробки HTML. У цьому прикладі ваш код
<div id="hello"></div>
не має значення всередині div. Отже, помилка піднімається, бо всередині немає значення, яке потрібно змінити. Це мало бути
<div id="hello">Some random text to change</div>
тоді.
Додайте jquery в < head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Використовуйте $ document.ready () : код може бути в < head>окремому файлі, наприклад main.js
1) використання js у тому ж файлі (додайте це в < head>):
<script>
$( document ).ready(function() {
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
});
</script>
2) за допомогою іншого файлу, такого як main.js (додайте це в < head>):
<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>
і додайте код у файл main.js :)
Вам потрібно переодягнутися divв p. Технічно innerHTML означає, що він знаходиться всередині <??? id=""></???>деталі.
Зміна:
<div id="hello"></div>
в
<p id="hello"></p>
Робити:
document.getElementById('hello').innerHTML = 'hi';
повернеться
<div id="hello"></div> into this <div id="hello">hi</div>
що насправді не має сенсу.
Ви також можете спробувати змінити:
document.getElementById('hello').innerHTML = 'hi';
в це
document.getElementById('hello').innerHTML='<p> hi </p> ';
щоб це працювало.
Без сумніву, більшість відповідей тут правильні, але ви також можете зробити це:
document.addEventListener('DOMContentLoaded', function what() {
document.getElementById('hello').innerHTML = 'hi';
});
Існують різні можливі причини, як ми обговорювали, хотіли б просто додати це для когось, хто може мати таку ж проблему, як моя.
У моєму випадку у мене відсутній закритий div, як показано нижче
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div> //I am an open div
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>
Відсутність закритого div може призвести до дезорганізації трансверсали від дочірнього до батьківського або батьківського до дочірнього, отже, наслідком помилки при спробі отримати доступ до елемента в DOM
Нехай DOM завантажується. Щоб зробити щось у DOM, спочатку потрібно завантажити його. У вашому випадку спочатку потрібно завантажити <div>тег. тоді вам є що змінити. якщо ви спочатку завантажуєте js, тоді ця функція прагне HTMLзробити те, що ви просили зробити, але коли цей час HTMLзавантажується, і ваша функція не може знайти файл HTML. Таким чином, ви можете розмістити сценарій внизу сторінки. всередині <body>тегу, то функція може отримати доступ, <div>оскільки DOM вже завантажується під час натискання на сценарій.