K
K
Khusan Juraev2020-04-16 09:29:16
JavaScript
Khusan Juraev, 2020-04-16 09:29:16

ForEach returns null how to fix?

const engWord = document.getElementById("eng"),
    rusWord = document.getElementById("rus"),
    inputs =  document.getElementsByClassName("input"),
    addButton = document.getElementById("add-word-btn"),
    table = document.getElementById('table');

let words,
    btnsdelete;

localStorage.length < 1 ? words = [] : words = JSON.parse(localStorage.getItem('words'));

const addWordToTable = index => {
    table.innerHTML +=
        `<tr class="tr">
        <td class="eng-word">${words[index].english}</td>
        <td class="rus-word">${words[index].russian}</td>
        <td>
           <button class="btn-delete">X</button>
        </td>
        <tr> `
};

words.forEach((element, i) => {
    addWordToTable(i);
});

function CreateWord(english, russian) {
    this.english = english;
    this.russian = russian;
}

addButton.addEventListener('click', () => {
    if (
        engWord.value.length < 1 ||
        rusWord.value.length < 1 ||
        !isNaN(engWord.value) ||
        !isNaN(rusWord.value)
    ) {
        for (let key of Array.from(inputs)) {
            key.classList.add("error")
        }
    } else {
        for (let key of Array.from(inputs)) {
            key.classList.remove("error")
        }
        words.push(new CreateWord(engWord.value, rusWord.value));
        localStorage.setItem("words", JSON.stringify(words));
        addWordToTable(words.length - 1);
        engWord.value = null;
        rusWord.value = null;
        addEventDelete();
    }
});

const deleteWord = e => {
    const rowIndex = e.target.parentNode.parentNode.parentNode.rowIndex;
    e.target.parentNode.parentNode.parentNode.remove();
    words.splice(rowIndex, 1);
    localStorage.removeItem('words');
    localStorage.setItem('words', JSON.stringify(words));
};

const addEventDelete = () => {
    if(words.length > 0) {
        btnsdelete = document.querySelectorAll('.btn-delete');
        for(let btn of Array.from(btnsdelete)) {
            btn.addEventListener('click', e => {
                deleteWord(e);
            })
        }
    }
};

addEventDelete();

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
ertaquo, 2020-04-16
@KhusanJuraev

This is possible if there are some elements in localStorage but no "words" element.
In any case, for a non-existent item, localStorage.getItem will return null, and JSON.parse(null) === null. So it's better to write something like this:

words = JSON.parse(localStorage.getItem('words')) || [];

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question