Почему не работают всплывающие уведомления?

Question

[DoNiFF]

function addError(message) {
    let chips = document.createElement('div');
    chips.classList.add('chips');
    chips.innerHTML = message;
    addChips(chips);
    setTimeout(function () { deleteChips(chips) }, 3000);
}
function deleteChips(chips) {
    chips.remove();
    let allChips = document.querySelectorAll('.chips-field .chips');
    if (allChips.length == 0) document.querySelector('.chips-field').remove();
}
function addChips(chips) {
    let chipsField = document.querySelector('.chips-field');
    if (chipsField) {
        chipsField.appendChild(chips);
    }
    else {
        let chipsField = document.createElement('div');
        chipsField.classList.add('chips-field');
        document.querySelector('body').appendChild(chipsField);
        chipsField.appendChild(chips);
    }
}

.chips {
    display: none;
    color: white;
    font-family: 'Mulish', sans-serif;
    font-size: 2em;
}
.chips-field {
    display: block;
}

Тупо ничего не выводится

Comments

[Сергей delphinpro]

https://codepen.io

Answer 1

[GeminiX]

в стилях chips-fiels, а в скрипте chips-field

Comments

[DoNiFF]

Исправил, но ничего не работает

[GeminiX]

функции вызываются, установка стилей работает?

Answer 2

[kefircus]

function addChips(chips) {
    let chipsField = document.querySelector('.chips-field');
    if (chipsField) {
        chipsField.appendChild(chips);
    }
    else {
        let chipsField = document.createElement('div');
        chipsField.classList.add('chips-field');
        document.body.insertAdjacentElement('afterbegin', chipsField);
        chipsField.appendChild(chips);
    }
}

.chips {
    color: white;
    font-family: 'Mulish', sans-serif;
    font-size: 2em;
}
.chips-field {
}

Comments

[DoNiFF]

Не работает

[kefircus]

Pro_Hacker, работает ведь

[kefircus]

Затестил вот даже, появляется

[DoNiFF]

kefircus, да оказывается работает, только у меня на странице не робит

[kefircus]

Pro_Hacker, в консоль addError('...') напиши, приостанови выполнение скриптов и чекни появился ли элемент в dom вообще. Если да, то чекай стили. Если нет, то у тебя по каким-то причинам js не работает, чекни в консоли мб перед объявлением функций ошибки были, хз

[DoNiFF]

Он есть, но как его оттуда достать?

[kefircus]

Лучше уберите все связанные с этим стили и написал их заново

[kefircus]

position должна быть fixed, а не absolute, кстати

[kefircus]

Вообще выглядеть это должно примерно так

.chips-field {
position: fixed;
display: block;
width: ?px;
right: ?px;
top: ?px;
}
.chips {
width: 100%;
/*паддинги, фон, шрифты и прочее*/
}