Stack Overflow на русском Asked by user382875 on August 27, 2020
Как сделать так чтобы после перезагрузки слова у которых none или table-cell , оставались.
Они меняются по нажатию на кнопку
const inputEng = document.querySelector('.eng-word'),
inputRus = document.querySelector('.rus-word'),
btnAddWord = document.querySelector('.addWords'),
btnHideRusWords = document.querySelector('.showEngWords'),
btnHideEngWords = document.querySelector('.showRusWords');
forms = document.querySelectorAll('.forms-val');
let words,
containerWords = document.querySelector('.word-container');
localStorage.length < 1 ? (words = []) : (words = JSON.parse(localStorage.getItem('words')));
// Попытки что-то придумать
// if (localStorage.getItem('engWords') !== null) {
// document.querySelectorAll('.english-word').forEach((item) => {
// item.style.display = localStorage.getItem(JSON.parse('engWords'));
// });
// }
// if (localStorage.getItem('rusWords') !== null) {
// document.querySelectorAll('.russian-word').forEach((item) => {
// item.style.display = localStorage.getItem(JSON.parse('rusWords'));
// });
// }
btnHideEngWords.addEventListener('click', () => {
if (words.length > 0) {
let layoutEngWords = document.querySelectorAll('.russian-word').forEach((item) => {
item.style.display === 'none'
? (item.style.display = 'table-cell')
: (item.style.display = 'none');
// localStorage.setItem('rusWords', JSON.stringify(item.style.display));
});
}
});
btnHideRusWords.addEventListener('click', () => {
if (words.length > 0) {
let layoutRusWords = document.querySelectorAll('.english-word').forEach((item) => {
item.style.display === 'none'
? (item.style.display = 'table-cell')
: (item.style.display = 'none');
// localStorage.setItem('engWords', JSON.stringify(item.style.display));
});
}
});
containerWords.querySelectorAll('.english-word').forEach((item) => {
item.style.display = 'none';
});
const viewWords = (item) => {
containerWords.innerHTML += `
<tr>
<td class="english-word">${words[item].english}</td>
<td class="russian-word">${words[item].russian}</td>
<td><button class="btn-setting delete-word">Delete</button></td>
</tr>
`;
};
words.forEach((element, index) => {
viewWords(index);
});
const deleteWord = (element) => {
const elementLine = element.target.parentNode.parentNode.rowIndex;
element.target.parentNode.parentNode.parentNode.remove();
words.splice(elementLine, 1);
localStorage.removeItem('words');
localStorage.setItem('words', JSON.stringify(words));
};
const listenDeleter = () => {
if (words.length > 0) {
let btnDelete = document.querySelectorAll('.delete-word').forEach((item) => {
item.addEventListener('click', (element) => {
deleteWord(element);
});
});
}
};
listenDeleter();
btnAddWord.addEventListener('click', () => {
if (
inputEng.value.length < 1 ||
inputRus.value.length < 1 ||
!isNaN(inputEng.value) ||
!isNaN(inputRus.value)
) {
for (let i of forms) {
i.classList.add('error');
}
} else {
for (let i of forms) {
i.classList.remove('error');
}
}
words.push(new PusherWords(inputEng.value, inputRus.value));
localStorage.setItem('words', JSON.stringify(words));
viewWords(words.length - 1);
inputEng.value = null;
inputRus.value = null;
});
function PusherWords(english, russian) {
this.english = english;
this.russian = russian;
}
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP