The working Codepen demo

CodePudding user response：

The problem resides in create_dot. When you compute the next number, you take in consideration all red dots, even those you have hidden :

//line 157
 var elements = document.getElementsByClassName('red-dot');
 var eLength = elements.length;
 kk=0;
 dValue = eLength 1;

What I would do is this (avoiding global variables) :

When you set the background to transparent, add a class hidden the adapt your selector :

//line 172
if (!isTaken) {
      newDot.dataset['dvalue'] = dValue;
      newDot.innerHTML = newDot.dataset.dvalue;
    } else {
      newDot.style.backgroundColor = 'transparent';
      newDot.classList.add('hidden');
    }

Then :

//line 157
 var elements = document.querySelectorAll('.red-dot:not(.hidden)');
 var eLength = elements.length;
 kk=0;
 dValue = eLength 1;

This way, you will only count visible red dots. THis technique can be adapted to fit your needs, you can either filter the elements and check their background-color property too if you prefer. The error is only in the fact that you don't display some red-dots, but you count them anyway and that lead your function to skip numbers.

CodePudding user response：

You have to introduce a new global variable numberOfDots. Initialize it to zero. Increase its value only when a dot is drawn on a grid position that is not already taken, i.e. inside the if (!isTaken) block. Then, instead of dValue = eLength 1, you can do dValue = numberOfDots 1.