How can I change javascript if statement to compare two words properly?

I wrote a function check() which compares two words - the given one (stored in json called from a local server) and the word from the input. If they differ, then the screen turns red, js adds one point to the "word_rank" in the json and does it untill the user enters the same word as the given one in the input. However my function thinks, that at the moment, when the given word appers on the screen the user already entered 'nothing' in the input/ As a result, even if the user types the write word, the json has already been changed at least one time (has "word_rank"+1). How do I correct it&

This is the actual example with full code: https://codepen.io/Ramzess/pen/JgbBEO

And this is the fuction:

function check() {
          var x, y, z;
          x = document.getElementById("span_text").textContent;
          y = document.getElementById("input").value;
          console.log(x, y, z);
          v = document.getElementById('btn');
          v.innerHTML = 'Check';
          if (x == 'START!' || x == y) {
            document.body.style.background = '#C0F200';
            document.getElementById('span').style.display = 'none';
            z = true;
            console.log(z);
            counter = (counter + 1) % arr.length;
            console.log(counter);
            v = document.getElementById('btn');
            v.innerHTML = 'Next';
            y = document.getElementById("input").value = '';
          } else {
            document.body.style.background = '#DB504A';
            document.getElementById('span').style.display = 'none';
            z = false;
            console.log(z);
            counter = (counter + 0) % arr.length;
            console.log(counter);
            y = document.getElementById("input").value = '';
            v = document.getElementById('btn');
            v.innerHTML = 'Try again';
            words[counter].word_rank++
            document.getElementById('json2').innerHTML = JSON.stringify(words[counter].word_rank);
            document.getElementById('json3').innerHTML = JSON.stringify(words[counter]);
              }
            }
            var m = document.getElementById('json1').innerHTML;
            console.log('m = ' + m);

        check();

I expect the function to initialize the checking session (when I see "START!") without turning the screen into red color and compare the given word from json with the word from input after the user typed something into it.

Thank you!