如何申请 forEach(); [关闭]答案

【问题标题】：How to apply forEach(); [closed]如何申请 forEach(); [关闭]
【发布时间】：2020-07-06 21:27:13
【问题描述】：

所以，我正在制作一个问答游戏，我想从一个数组中生成答案，我尝试了一些解决方案，但它不起作用，所以我需要你对我的代码的解决方案。

这是康斯特

const shekitxva = [
{
    questions: 'What was created first',
    answers:[
        {text: 'Egg', correct: 'false'},
        {text: 'Chicken', correct: 'true'},
        {text: 'Eleniko', correct: 'false'},
        {text: 'Computer', correct: 'false'}

    ]
}

]

这里是问题展示

kitxva.innerText = shekitxva[0].questions;

那么如何将这些答案显示给 div 元素

javascript

var pasuxebi = document.querySelectorAll('.pasuxebi');
var checkBtn = document.querySelector('.check');
var nextBtn = document.querySelector('.next');
var startBtn = document.querySelector('.start');
var kitxva = document.querySelector('h3');
var pasuxebiBox = document.querySelector('.pasuxebi');

HTML

 <div class="box">
    <h3 class="none">Question</h3>
<div class="pasuxebi none">
    <div class="pasuxi">pirveli</div>
    <div class="pasuxi">pirveli</div>
    <div class="pasuxi">pirveli</div>
    <div class="pasuxi">pirveli</div>
</div>
<div class="buttons">
    <div class="start">Start</div>
    <div class="check none">Check</div>
    <div class="next none">Next</div>
 </div>

【问题讨论】：

您的问题到底是什么？这不可能是你所有的代码，或者是吗？
“它不起作用”是一个毫无意义的陈述。究竟会发生什么？哪个代码给出了准确的结果，这些结果有什么问题？相反，您想要什么结果？请edit问题并澄清。此外，如果您仅对代码中的事物使用英文名称，这会有所帮助，因此我们至少可以猜测 pasuxi 和 pirveli 在您的代码中多次执行的操作。

标签： javascript html arrays foreach

【解决方案1】：

您可以使用数组上的映射函数来映射数组，例如“foreach”

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

所以你可以做这样的事情

<!DOCTYPE html>
<html>

<body>

    <h1>My First Web Page</h1>
    <p>My First Paragraph</p>

    <p id="demo"></p>

    <script>
        const shekitxva = [
            {
                questions: 'What was created first',
                answers: [
                    { text: 'Egg', correct: 'false' },
                    { text: 'Chicken', correct: 'true' },
                    { text: 'Eleniko', correct: 'false' },
                    { text: 'Computer', correct: 'false' }

                ]
            },
            {
                questions: 'What was created second',
                answers: [
                    { text: 'Egg', correct: 'false' },
                    { text: 'Chicken', correct: 'true' },
                    { text: 'Eleniko', correct: 'false' },
                    { text: 'Computer', correct: 'false' }

                ]
            },
            {
                questions: 'What was created third',
                answers: [
                    { text: 'Egg', correct: 'false' },
                    { text: 'Chicken', correct: 'true' },
                    { text: 'Eleniko', correct: 'false' },
                    { text: 'Computer', correct: 'false' }

                ]
            }


        ]
        let inputs = '';
        shekitxva.map(qst => {
            inputs += '<h3>' +  qst.questions + '</h3>';
            qst.answers.map(ans => {
                inputs += '<p>' + ans.text + ' is ' + ans.correct + '<p>';
            })
        })
        document.getElementById('demo').insertAdjacentHTML('afterbegin', inputs);
    </script>

</body>

</html>

【讨论】：

【解决方案2】：

你必须在后端验证答案，因为用户可以看到你的前端代码，你不应该显示哪个答案是正确的，在你的元素之间循环你可以这样做：

    const shekitxva = [
    {
        questions: 'What was created first',
        answers: [
            { text: 'Egg', correct: 'false' },
            { text: 'Chicken', correct: 'true' },
            { text: 'Eleniko', correct: 'false' },
            { text: 'Computer', correct: 'false' }
        ]
    }
]
let quAnswers = shekitxva[0].answers;
var pasuxebi = document.querySelectorAll('.pasuxi');
for (i=0;i<quAnswers.length ; i++) {
    pasuxebi[i].innerHTML = quAnswers[i].text ;
}

您需要为您的答案容器分配一个名称参数（例如分配data-value）并将选择的带有容器名称的答案发送到后端进行验证，但不要显示哪个是正确的，即使在您的javascript中，因为用户可以看到它。当您想知道如何循环和生成答案文本时，上面的代码为您提供了线索
如果你有超过 1 个问题，你应该遍历父母，然后访问孩子，使用他们的索引来访问你的数组和它的对象

【讨论】：