Не все добавляется в массив, что не так?

Question

[Алексей Яковлев]

const questions = [
    {
        question: 'Вопрос', 
        done: 'a',
        answers: [
            {text: 'Ответ'},
            {text: 'Ответ'},
            {text: 'Ответ'}
        ]
    },
    {
        question: 'Вопрос',
        done: 'b',
        answers: [
            {text: 'Ответ'},
            {text: 'Ответ'},
            {text: 'Ответ'}
        ]
    },
    {
        question: 'Вопрос',
        done: 'a',
        answers: [
            {text: 'Ответ'},
            {text: 'Ответ'},
            {text: 'Ответ'}
        ]
    },
    {
        question: 'Вопрос,
        done: 'b',
        answers: [
            {text: 'Ответ'},
            {text: 'Ответ'}
        ]
    }
];

quizEndBtn.addEventListener('click', () => {
    const name = document.querySelector('#name');
    const response = document.querySelectorAll('#response');
    const endResponse = document.querySelector('.end-response');

    if (name.value) {
        questions.map(question => {
            const doneArray = [...response].filter(resp => {
                return resp.value.toString().toLowerCase() === question.done.toString().toLowerCase();
            })

            return endResponse.textContent = `${name.value} ответил на ${doneArray.length} вопроса из ${questions.length}`;
        })
    } else {
        endResponse.textContent = 'Заполните имя!';
    }
})

Когда я писал все правильно в resp.value (a,b,a,b), то doneArray.length он равен 2, но должен быть равен 4, что не так я сделал?

Comments

[Israfil22]

document.querySelectorAll('#response') - cелектор всех элементов, у которых ID response.
ID может быть только у одного dom элемента.

[WbICHA]

[...response].filter

Зачем пересобирать в массив на каждой итерации? Трудно при объявлении сразу конвертнуть?

resp.value.toString().toLowerCase() 
question.done.toString().toLowerCase();

Нафига тут туСтринг?
И нафига у донов туЛоуерКейс? Это твои обработанные данные, откуда там взяться аппер кейсу? И даже если он там может быть каким-то боком, зачем конвертировать в лоуер при каждой итерации?

return endResponse.textContent = `${name.value} ответил на ${doneArray.length} вопроса из ${questions.length}`;

Почему это в цикле? Перезапись самого себя на каждой итерации.

Answer 1

[Артур Арутюнян]

Добрый день,
Есть несколько вопросов:
Во-первых почему у вас несколько элементов с одинаковыми id??

const response = document.querySelectorAll('#response');

Во-первых зачем вам нужен метод .toString() в коде? пока не пойму как у вас реализовано, но проверка у вас странная для меня.

И наконец в-третьих киньте в консоль ваш объект или на этапе проверки, или и там и там, и сразу станет ясно что вы делаете не так, полагаю что проблема в document.querySelectorAll('#response');

Попробуйте так:

questions.map(question => {
          console.log(response)
            const doneArray = [...response].filter(resp => {
console.log(`resp.value ${resp.value}`)
console.log(`question.done ${question.done}`)
                return resp.value.toString().toLowerCase() === question.done.toString().toLowerCase();
            })

Я мог не уловить контекста, но такое ощущение что вы немного вслепую кодите))))

Comments

[Алексей Яковлев]

Поменял id на class
Отвечал так (a,b,a,b), вывелось это:

NodeList(4) [input.response, input.response, input.response, input.response]
script.js:108 resp.value a
script.js:109 question.done a
script.js:108 resp.value b
script.js:109 question.done a
script.js:108 resp.value a
script.js:109 question.done a
script.js:108 resp.value b
script.js:109 question.done a
script.js:106 NodeList(4) [input.response, input.response, input.response, input.response]
script.js:108 resp.value a
script.js:109 question.done b
script.js:108 resp.value b
script.js:109 question.done b
script.js:108 resp.value a
script.js:109 question.done b
script.js:108 resp.value b
script.js:109 question.done b
script.js:106 NodeList(4) [input.response, input.response, input.response, input.response]
script.js:108 resp.value a
script.js:109 question.done a
script.js:108 resp.value b
script.js:109 question.done a
script.js:108 resp.value a
script.js:109 question.done a
script.js:108 resp.value b
script.js:109 question.done a
script.js:106 NodeList(4) [input.response, input.response, input.response, input.response]
script.js:108 resp.value a
script.js:109 question.done b
script.js:108 resp.value b
script.js:109 question.done b
script.js:108 resp.value a
script.js:109 question.done b
script.js:108 resp.value b
script.js:109 question.done b

[Артур Арутюнян]

Алексей Яковлев, сейчас приеду домой и посмотрю, скажите пожалуйста, а где-то этот код можно посмотреть? Сайт или что-то подобное? Я бы исправил, заодно и Вам бы объяснил почему не работало

[Артур Арутюнян]

Дорогой товарищ, в вашем коде была написана абсолютная ерунда, не обижайтесь пожалуйста, держите работающее решение:

Вай, работающее решение

Если быть конкретнее, то вы не понимали что с чем сравнивали, ведь надо установить сначала какой ответ к какому вопросу относится, я использовал в качестве общего идентификатора индексы в массиве значений, а так как у нас и объекты с вопросами и инпуты расположены в одинаковом порядке, то это не вызовет ошибки, однако чтобы не запутаться присвойте вопросам и соответствующим им инпутам одинаковые id, так правильнее

Не забудьте отметить мой ответ как решение вашего вопроса, я больше часа потратил делая работу за вас, впредь пользуйтесь песочницей чтобы мы могли быстро иметь доступ к вашей проблеме

[Алексей Яковлев]

Артур Арутюнян, спасибо, впредь буду внимателен