Событие javscript vanila click работает на компьютере, но не на телефоне - PullRequest
0 голосов
/ 06 августа 2020

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>

1 Ответ

2 голосов
/ 06 августа 2020

На моем iPhone похоже, что за текстом следует много конечных пробелов, попробуйте простую обрезку

if(questions[i].innerText.trim(' ') === 'Of course')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...