猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何申请forEach();

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


这是常量


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');

超文本标记语言


 <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>


慕森王
浏览 93回答 2
2回答

慕勒3428872

您必须在后端验证答案，因为用户可以看到您的前端代码，您不应该显示哪个答案是正确的，要在元素之间循环，您可以执行以下操作：&nbsp; &nbsp; const shekitxva = [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; questions: 'What was created first',&nbsp; &nbsp; &nbsp; &nbsp; answers: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Egg', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Chicken', correct: 'true' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Eleniko', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Computer', correct: 'false' }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }]let quAnswers = shekitxva[0].answers;var pasuxebi = document.querySelectorAll('.pasuxi');for (i=0;i<quAnswers.length ; i++) {&nbsp; &nbsp; pasuxebi[i].innerHTML = quAnswers[i].text ;}您需要为您的答案容器分配一个名称参数（如分配data-value），并将所选答案与容器名称一起发送到后端进行验证，但即使在您的 JavaScript 中也不要显示哪个答案是正确的，因为用户可以看到它。当您想知道如何循环并生成答案文本时，上面的代码为您提供了线索，如果您有超过 1 个问题，您应该循环遍历父项，然后访问子项，使用它们的索引来访问您的数组及其对象
0

米脂

您可以在数组上使用映射函数来映射数组，例如“foreach”const array1 = [1, 4, 9, 16];// pass a function to mapconst map1 = array1.map(x => x * 2);console.log(map1);// expected output: Array [2, 8, 18, 32]所以你可以做这样的事情<!DOCTYPE html><html><body>&nbsp; &nbsp; <h1>My First Web Page</h1>&nbsp; &nbsp; <p>My First Paragraph</p>&nbsp; &nbsp; <p id="demo"></p>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; const shekitxva = [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; questions: 'What was created first',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; answers: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Egg', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Chicken', correct: 'true' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Eleniko', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Computer', correct: 'false' }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; questions: 'What was created second',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; answers: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Egg', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Chicken', correct: 'true' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Eleniko', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Computer', correct: 'false' }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; questions: 'What was created third',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; answers: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Egg', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Chicken', correct: 'true' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Eleniko', correct: 'false' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Computer', correct: 'false' }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; let inputs = '';&nbsp; &nbsp; &nbsp; &nbsp; shekitxva.map(qst => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputs += '<h3>' +&nbsp; qst.questions + '</h3>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; qst.answers.map(ans => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputs += '<p>' + ans.text + ' is ' + ans.correct + '<p>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('demo').insertAdjacentHTML('afterbegin', inputs);&nbsp; &nbsp; </script></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5