local storage : Uncaught TypeError: Cannot set property 'innerHTML' of null

143
27 октября 2019, 20:10

В чем же ошибка ? При том, что данные "ross" ,были введены и отображаются.

var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}
if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
}
myButton.onclick = function() {
  setUserName();
}

вот полный код скрипта

Answer 1

У Вас отcутствует тег h1 в html разметке.

Это можно понять из сообщения об ошибке и вашего кода:

В самом начале Вы делаете поиск первого попавшегося h1 на странице

var myHeading = document.querySelector('h1');

А затем этому элементу пытаетесь изменить свойство:

myHeading.innerHTML = 'Mozilla is cool, ' + storedName;

При всем этом отладчик Вам сказал, что он не может поменять свойство innerHTML у объекта, который null;

Если учесть то, что нигде больше изменения значения переменной myHeading не происходит, можно сделать вывод что document.querySelector не нашел то, что искал.

Answer 2

const body = document.querySelector('body') 
let name = prompt('Ok?'); 
console.info(name); 
body.innerHTML = `<p>${name}</p>`;

Answer 3

Вам же ошибка говорит что NULL, и что скрип не может установить NULL.

const body = document.querySelector('body') 
let name = prompt('Ok?'); 
console.info(name); 
body.innerHTML = `<p>${name}</p>`;

UPD Как верно подметили в комментарии, проверьте, что нашелся элемент, в который вы вставляете данные.

READ ALSO
Форма удаляется сама после нажатия на кнопку
javascript

Форма удаляется сама после нажатия на кнопку

Не могу понять в чем проблемаЕсть сайт, внизу есть форма

 146
Как импортировать записи вордпресс?
MySQL

Как импортировать записи вордпресс?

Всем доброго времени суток! Вопрос вот в чёмУ клиента есть интернет магазин на вордпрессе, но это не woocommerce

 112
Как уменьшить размер индексов и таблицы wp_options?
MySQL

Как уменьшить размер индексов и таблицы wp_options?

Конвертирую бд Joomla ~ 6ГБ в WP с помощью плагина FG JoomlaВсего около 165000 записей

 118
MySql Сount по месяцам
MySQL

MySql Сount по месяцам

Есть таблица вида:

 111