Форум

Lefseq · #1 (**permalink**) 19.04.2019, 11:59

Здравствуйте. Помогите доработать код.

Нажимаем на любую из надписей Пуск, надпись становится красной, а рядом стоящее число увеличивается на один, при повторном нажатии все возвращается на исходное положение. Все действия запоминаются в куках браузера пользователя и отображаются при повторных заходах или обновлениях страницы.

Так все и происходит, но если я нажимаю один раз Пуск, чтобы он стал красным, перезагружаю страницу, потом в коде меняю число у того спана по которому кликал, перезагружаю страницу и кликаю несколько раз по тому же спану по которому кликали в самом начале. То число просто идет на уменьшение.

<div class="myClass">
<span class="pusk">пуск</span>
<span class="num">25</span>
   
<span class="pusk">пуск</span>
<span class="num">30</span>
   
<span class="pusk">пуск</span>
<span class="num">50</span>
</div>

<script>
let myClass = document.querySelector('.myClass'), arr = [];
for(let e of myClass.querySelectorAll('.num')) arr.push(e.innerText);

let old = JSON.parse(localStorage.getItem('some'));
if(old) myClass.innerHTML = old.html;

myClass.addEventListener('click',e => {
if(e.target.classList.contains('pusk')){
let it = e.target;
let i = [...myClass.querySelectorAll('.pusk')].indexOf(it);
it.nextElementSibling.innerText == arr[i] ? 
(++it.nextElementSibling.innerText, it.style.color = 'red') :
(--it.nextElementSibling.innerText, it.style.color = '');
}
});

window.addEventListener('beforeunload',()=> localStorage.setItem('some',JSON.stringify({html : myClass.innerHTML})) );
</script>

рони · #2 (**permalink**) 19.04.2019, 14:31

Lefseq,

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">

</head>

<body>
<div class="myClass">
<span class="pusk">пуск</span>
<span class="num">25</span>

<span class="pusk">пуск</span>
<span class="num">30</span>

<span class="pusk">пуск</span>
<span class="num">50</span>
</div>
<script>
let myClass = document.querySelector('.myClass'),
    num = [...myClass.querySelectorAll('.num')],
    pusk = [...myClass.querySelectorAll('.pusk')];
let old = JSON.parse(localStorage.getItem('somme') || '{}');
Object.keys(old).forEach(i => {
    ++num[i].textContent;
    pusk[i].style.color = 'red'
});
myClass.addEventListener('click', e => {
    if (e.target.classList.contains('pusk')) {
        let it = e.target;
        let i = pusk.indexOf(it);
        if (old[i]) {
            --num[i].textContent;
            pusk[i].style.color = '';
            delete old[i]
        } else {
            ++num[i].textContent;
            pusk[i].style.color = 'red';
            old[i] = true
        }
        localStorage.setItem('somme', JSON.stringify(old))
    }
});
</script>

</body>
</html>

Lefseq · #3 (**permalink**) 19.04.2019, 16:43

рони,
Спасибо, работает!

Форум

Справочник

Discord чат

Курсы javascript