O javascript do projeto funciona perfeitamente, adicionando novos elementos e atualizando elementos existentes, contudo sempre apresenta um erro na inicialização do console/pagina html indicado abaixo:
companion-bubble.js:1465 Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.keys () at companion-bubble.js:1465:19716 at Generator.next () at Ln (companion-bubble.js:1465:19134)
OBS.: O erro só aparece quando rodo o código utilizando "LIVE SERVER", se abrir pelo navegador não é apresentado erro.
Acredito que seja algo relacionada à alguma regra da linguagem, sobre escopo ou inicialização de variáveis, porém não consegui identificar. Peço ao nobres colegas que analisem o código e me ajudem nesta demanda, obrigado. Segue o código abaixo:
const form = document.getElementById("novoItem");
const listPage = document.getElementById("lista");
const itens = JSON.parse(localStorage.getItem("itens")) || [];
itens.forEach(element => {
createElementHTML(element)
});
form.addEventListener("submit", (event) => {
event.preventDefault();
const nome = event.target.elements['nome'];
const quantidade = event.target.elements['quantidade'];
fillPage(nome.value.trim(), quantidade.value);
nome.value = "";
quantidade.value = "";
});
function updateElementHTML(obj){
const txt = `[data-id='${obj.id}']`;
document.querySelector(txt).innerHTML = obj.quantidade;
}
function createElementHTML(obj){
const liTag = document.createElement('li');
liTag.classList.add('item');
const strongTag = document.createElement('strong');
strongTag.innerHTML = obj.quantidade;
strongTag.dataset.id = obj.id;
liTag.appendChild(strongTag);
liTag.innerHTML += obj.nome;
listPage.appendChild(liTag);
}
function fillPage(nome, quantidade){
let index = containsObj(nome);
if(index > -1){
updateItem(nome, quantidade, index);
}else{
insertItem(nome, quantidade);
}
localStorage.setItem('itens', JSON.stringify(itens));
}
function insertItem(nome, quantidade){
const obj = {'nome':nome, 'quantidade':quantidade, 'id':itens.length};
itens.push(obj);
createElementHTML(obj);
}
function updateItem(nome, quantidade, index){
const obj = {'nome':nome, 'quantidade':quantidade, 'id':index};
itens.splice(index, 1, obj);
updateElementHTML(obj);
}
function containsObj(nome){
const values = itens.map(el => el.nome.toLowerCase()) || [];
return values.indexOf(nome.toLowerCase());
}