所以，我正在制作一个测验游戏，我想从数组生成答案，我尝试了一些解决方案，但它不起作用，所以我需要你对我的代码的解决方案。这是常量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 元素javascriptvar 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>
2 回答
慕勒3428872
TA贡献1848条经验 获得超6个赞
您必须在后端验证答案，因为用户可以看到您的前端代码，您不应该显示哪个答案是正确的，要在元素之间循环，您可以执行以下操作：
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 个问题，您应该循环遍历父项，然后访问子项，使用它们的索引来访问您的数组及其对象
米脂
TA贡献1836条经验 获得超3个赞
您可以在数组上使用映射函数来映射数组，例如“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 回答
- 0 关注
- 92 浏览
添加回答
举报
0/150
提交
取消