esta es una demostración de codepen aquí e intenta hacer clic en el lienzo y puede deshacer y borrar la cuadrícula. El problema que estoy tratando de resolver es que quiero colocar algunos números (en negro) en el cuadrado rojo. Por ejemplo, cuando hace clic en la cuadrícula, aparecerá el primer punto rojo y en el interior se etiquetará como 1 y el segundo se etiquetará como 2 y así sucesivamente y si los puntos se superponen, solo mostrará el número original (no un número nuevo). He intentado usar el siguiente código:
var elements = document.getElementsByClassName('red-dot'); elements.innerHTML = 'Testing here';Gracias por leer :)
Esto debería hacerlo:
document.getElementsByClassName(.red-dot)[0] accederá al primer elemento con el nombre de clase punto rojoEl resto se explica solo.
var elements = document.getElementsByClassName('red-dot'); var eLength = elements.length; const dValue = parseInt(eLength) + 1; let isTaken = false; // check if dot number is taken for (let d=0;d<eLength;d++) { let top = elements[d].style.top; let left = elements[d].style.left; if (top == newDot.style.top && left == newDot.style.left) { isTaken = true; } } if (!isTaken) { newDot.dataset['dvalue'] = dValue; newDot.innerHTML = newDot.dataset.dvalue; } else { newDot.style.backgroundColor = 'transparent'; } document.body.appendChild(newDot);