Home>

I'm working on a game where I type words using images as hints.
If i make a correct/wrong typing judgment and it is correct, you can proceed to the next problem.
I want to configure.

Put the image and word of the set in the object to make a constant quizSet, and each element
Get from HTML and display images and words in Javascript
When you press the start button, the question (first question) will be displayed randomly,
If i type the characters correctly, the displayed characters will disappear.
However, after the correct answer, the next question (second question) does not proceed and the first question loops.

Corresponding source code
'use strict';
{
  const question = document.getElementById ('js-image');
  const target = document.getElementById ('js-target');
  const quizSet = shuffle ([[
    {q:'../img/***.png', t:'***'}, // q: image, t: word
    {q:'../img/***.png', t:'***'},
    {q:'../img/***.png', t:'***'},
    {q:'../img/***.png', t:'***'},
    {q:'../img/***.png', t:'***'},
    {q:'../img/***.png', t:'***'},
  ]);
    let currentNum = 0;
    let loc = 0;
    let isPlaying = false;
    let word = quizSet [currentNum] .t;
    let image = quizSet [currentNum] .q;
    function shuffle (arr) {
      for (let i = arr.length --1;i>0;i--) {
        const j = Math.floor (Math.random () * (i + 1));
        [arr [j], arr [i]] = [arr [i], arr [j]];
      }
      return arr;
    }
    function setQuiz () {
    question.src = image;
    target.textContent = word;
    loc = 0;
    }
    document.addEventListener ('click', () =>{
    if (isPlaying === true) {
      return;
    }
    isPlaying = true;
    setQuiz ();
  });
   document.addEventListener ('keydown', e =>{
     if (e.key! == word [loc]) {
       return;
     }
     loc ++;
     target.textContent =''. repeat (loc) + word.substring (loc);
    if (loc === word.length) {
      currentNum ++;
      setQuiz ();
      }
   });
 }
<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  <link rel = "stylesheet" href = "css/ress.css">
  <link rel = "stylesheet" href = "css/style.css">
</head>
<body>

  <p>Click to Start!</P>
   
  <script src = "js/main.js"></script>
</body>
</html>
What I tried

If the typing character (loc) is typed correctly to the end (word.length)
I wonder if I should call the setQuiz () function by increasing the array [currentNum] one by one.
I was wondering ... I did some research myself, but I couldn't figure out the cause.
I would appreciate any advice.