Promise, resolve() возвращает только первое значение?

Question

[Roma Ishutin]

Хочу разобраться с Promise, но возникает вопрос. Я хочу чтобы Promise возвращал мне по клику на элемент его значение. При первом клике он возвращает, но вот во-второй раз уже нет. Хотя функция которая находится внутри этого Promise отрабатывает при каждом клике.

function createQuestion(step) {
        let block = document.querySelector(".block"),
            questionWrapper = '';

        for (let key in question[step]) {
            questionWrapper += `
            <div class="question-wrapper">
                <div class="question">
                    <p data-type = "${key}" >${question[step][key]}</p>
                </div>
                <div class="answer">
                    <div data-type = "${key}"  data-val="0" class="answer_variant active">0</div>
                    <div data-type = "${key}"  data-val="1" class="answer_variant">1</div>
                    <div data-type = "${key}"  data-val="2" class="answer_variant">2</div>
                    <div data-type = "${key}"  data-val="3" class="answer_variant">3</div>
                    <div data-type = "${key}"  data-val="4" class="answer_variant">4</div>
                    <div data-type = "${key}"  data-val="5" class="answer_variant">5</div>
                    <div data-type = "${key}"  data-val="6" class="answer_variant">6</div>
                    <div data-type = "${key}"  data-val="7" class="answer_variant">7</div>
                    <div data-type = "${key}"  data-val="8" class="answer_variant">8</div>
                    <div data-type = "${key}"  data-val="9" class="answer_variant">9</div>
                    <div data-type = "${key}"  data-val="10" class="answer_variant">10</div>
                </div>
            </div>
         `;
            block.innerHTML = questionWrapper;
        }
    }

    const promis = new Promise((resolve, reject) => {
        createQuestion(step);
        let answer = document.querySelectorAll(".answer_variant");
        answer.forEach(item => {
            item.addEventListener("click", () => {
                let previousItem = item,
                    nextItem = item;
                while (previousItem = previousItem.previousElementSibling) {
                    previousItem.classList.remove("active");
                }
                while (nextItem = nextItem.nextElementSibling) {
                    nextItem.classList.remove("active");
                }
                item.classList.add("active");
                // console.log(item);
                resolve(item);
            })
        })
    }).then(item => {
        console.log(item);
    });

Comments

[Kovalsky]

"функция которая находится внутри этого Promise отрабатывает при каждом клике", а сам промис завершился/разрешился при первом клике. Собственно он для этого и существует. Если вам нужен реактивный объект который бы поддерживал подписки, то можете использовать например Observable

Конечно не знаю какая у вас задача, но по вашему коду складывается впечатление будто промисы только усложнят всё. На то же намекает установка обработчиков в цикле

[Roma Ishutin]

Kovalsky, Я с вами полностью согласен, я все усложняю)

[WbICHA]

Ковальский дело говорит. Зачем тут промис? А эвент вообще страшный.

[Roma Ishutin]

WbICHA, окей, возможно страшный, а как мне узнавать data атрибут элемента на который я нажал ?

[Фёдор]

Roma Ishutin,

https://learn.javascript.ru/bubbling-and-capturing">

[Kovalsky]

Roma Ishutin, "как мне узнавать data атрибут элемента на который я нажал" - скопировал эту строчку в гугл, увидел много статеек на эту тему с примерами

[Mikhail Osher]

https://developer.mozilla.org/en-US/docs/Web/JavaS...

После вызова функции resolve, объект promise переходит в состояние fulfilled. Соответственно, дальнейшие вызовы уже ничего не делают.

Promise задумано, чтобы выстрелить значение 1 раз. Если нужно много раз, тогда смотрите в сторону Observable, например RxJS.

Answer 1

[Egor Varenik]

Для начала, вижу ошибку здесь. Знак = должен быть двойным или тройным

while (previousItem = previousItem.previousElementSibling) {
                    previousItem.classList.remove("active");
                }
                while (nextItem = nextItem.nextElementSibling) {
                    nextItem.classList.remove("active");
                }