所以，我正在制作一個測驗游戲，我想從數組生成答案，我嘗試了一些解決方案，但它不起作用，所以我需要你對我的代碼的解決方案。這是常量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 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消