How to solve this numbering issue due to overlap?

Question

The working Codepen demo here. When you click on the grid, it will draw lines with numbered red dots. The problem I am facing now is : lets say if you click on the grid to give a 1,2,3 line as shown above and because you want to create a line with dot number 5, you have to click back on the 2 again. So, a number gets skipped because it labels it as 1,2,3,5 and there is no 4. I tried to actually amend the code at Line 160 because it is responsible for the addition of the numbering. Any help will be appreciated .

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

Thank you for reading and have a nice day :)

Answer 1

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.

Answer 2

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.