https://codepen.io/allanrivers/pen/NWNKWwL
Когда я нажимаю на правильный ответ, он правильно работает на моем компьютере. Когда я делаю то же самое на мобильном телефоне, это работает неправильно. Я попытался использовать сенсорный запуск, но из-за этого все приложение работало некорректно. ////////////////////////////////////////////////// /////////
const questions = document.querySelectorAll('.questions');
const question1 = document.querySelector('.question1');
const question = () => {
// loop through all the answers in order to add click event
for (let i = 0; i < questions.length; i++) {
questions[i].addEventListener('click', (e) => {
// If the answer is correct
if(questions[i].innerText === 'Of course'){
questions[0].style.backgroundColor = 'green';
let h1 = document.createElement('h1');
h1.innerText = 'Correct!'
question1.appendChild(h1);
// let btn = document.createElement('button');
// btn.innerHTML = 'Next question';
// question1.appendChild(btn);
// Reset btn
// let reset = document.createElement('button');
// reset.innerHTML = 'Reset';
// question1.appendChild(reset);
// reset.addEventListener('click', () => history.go(0))
// Remove the wrong answers
for(let i = 1; i <= questions.length; i++) {
questions[i].remove()
}
} else {
// Grab the current answer and change the color to red
let changeColor = e.target;
changeColor.style.backgroundColor = 'red'
// Create an h1 to indicate that user has chosen the wrong answer
let wrongh1 = document.createElement('h1');
wrongh1.innerText = 'I\'m sorry, but that\'s incorrect. Try again!';
wrongh1.classList.add('wrong');
question1.appendChild(wrongh1);
// setTimeout to delete the extra h1 tags
setTimeout(() => {wrongh1.remove()}, 1500)
}
}, {once: true})
}
}
question()
.question1 {
text-align: center;
}
#title {
font-size: 3rem;
text-decoration: underline;
}
#question {
color: #333;
}
.question {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
.questions {
background-color: teal;
width: 100%;
margin: auto;
cursor: pointer;
z-index: 99;
}
<div class="question1">
<h1 id="title">Quiz</h1>
<h1 id="question">Is web development fun?</h1>
<div class="question">
<div class="questions">
<h1>Of course</h1>
</div>
<div class="questions">
<h1>No</h1>
</div>
<div class="questions">
<h1>What is web development?</h1>
</div>
<div class="questions">
<h1>Food is better</h1>
</div>
</div>
</div>