¿Cómo puedo imprimir un valor numérico creciente en cada clic dentro de divs?
aquí mis divs que quiero insertar números en cada clic
for(let i = 1; i < 101; i++) { document.getElementById("grid-item").addEventListener("click", myFunction); function myFunction() { document.getElementById("grid-item").innerHTML = i; } </div> <div class="grid-container" id="grid-container-item"> <div class="grid-item grid-item1" id="grid-item1" onclick="myFunction()"></div> <div class="grid-item grid-item2" id="grid-item2" onclick="myFunction()"></div> <div class="grid-item grid-item3" id="grid-item3" onclick="myFunction()"></div> <div class="grid-item grid-item4" id="grid-item4" onclick="myFunction()"></div> <div class="grid-item grid-item5" id="grid-item5" onclick="myFunction()"></div> <div class="grid-item grid-item6" id="grid-item6" onclick="myFunction()"></div> <div class="grid-item grid-item7" id="grid-item7" onclick="myFunction()"></div> <div class="grid-item grid-item8" id="grid-item8" onclick="myFunction()"></div> <div class="grid-item grid-item9" id="grid-item9" onclick="myFunction()"></div> <div class="grid-item grid-item10" id="grid-item10" onclick="myFunction()"></div> </div>Si te entiendo correctamente, entonces puedes hacer algo como lo que se ve dentro de esto:
function myFunction(e) { e.innerHTML = (parseInt(e.innerHTML) || 0) + 1; // console.log(e.innerHtml) } .grid-container { display: flex; } .grid-item { width: 50px; height: 50px; border: 1px solid #000; background: #ccc; } <div class="grid-container" id="grid-container-item"> <div class="grid-item grid-item1" id="grid-item1" onclick="myFunction(this)"></div> <div class="grid-item grid-item2" id="grid-item2" onclick="myFunction(this)"></div> <div class="grid-item grid-item3" id="grid-item3" onclick="myFunction(this)"></div> <div class="grid-item grid-item4" id="grid-item4" onclick="myFunction(this)"></div> <div class="grid-item grid-item5" id="grid-item5" onclick="myFunction(this)"></div> <div class="grid-item grid-item6" id="grid-item6" onclick="myFunction(this)"></div> <div class="grid-item grid-item7" id="grid-item7" onclick="myFunction(this)"></div> <div class="grid-item grid-item8" id="grid-item8" onclick="myFunction(this)"></div> <div class="grid-item grid-item9" id="grid-item9" onclick="myFunction(this)"></div> <div class="grid-item grid-item10" id="grid-item10" onclick="myFunction(this)"></div> </div> Al pasar this a la función llamada por onclick pasa el elemento en el que se encuentra la propiedad. Lo que significa que la función siempre ejecutará el código correcto para la función en la que se hizo clic.
let index = 1; let last_element = undefined; let last_value = undefined; function myFunction(element) { last_value = element.innerHTML; element.innerHTML = index++; last_element = element; } document.getElementById("reset_all").addEventListener("click", function(){ var elements = document.getElementsByClassName('grid-item'); Array.prototype.forEach.call(elements, function(element) { element.innerHTML = ''; index = 1; }); }) document.getElementById("undo").addEventListener("click", function(){ if (!last_element) return; last_element.innerHTML = last_value; index--; last_element = undefined; }); .grid-item { display: table-cell; background-color: pink; border: 2px solid black; width: 50px; height: 50px; text-align: center; } #reset_all { background-color: lightblue; border: 2px solid black; width: 70px; height: 20px; } #undo { background-color: lime; border: 2px solid black; width: 70px; height: 20px; } <div class="grid-container" id="grid-container-item"> <div class="grid-item" id="grid-item1" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item2" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item3" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item4" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item5" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item6" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item7" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item8" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item9" onclick="myFunction(this)"></div> <div class="grid-item" id="grid-item10" onclick="myFunction(this)"></div> </div> <br> <div id="reset_all">Reset All</div> <div id="undo">Undo</div>¿lo decias en serio? Si es así, dime para explicarlo...
Un enfoque moderno sería eliminar todo el JS en línea del HTML y usar la delegación de eventos para capturar eventos de los elementos secundarios del contenedor.
El oyente llama a una función que inicializa un recuento (sin necesidad de variables globales) y luego devuelve una nueva función ( un cierre ) que actuará como controlador para el oyente de clics. Cuando se devuelve lleva consigo una copia de la count .
// Select the container const container = document.querySelector('.container'); // Attach one listener to it // We call `handleClick` which returns a new function // that is called when the listener is fired. It // carries with it its own local copy of `count`. container.addEventListener('click', handleClick(), false); // `handleClick` initialises `count` and then // returns a new function that is called when the // container is clicked. When it is clicked it checks // to see if the clicked element has an "item" class // and then it updates its text content with // an incremented `count`. function handleClick() { let count = 0; return function (e) { if (e.target.matches('.item')) { e.target.textContent = ++count; } } } .container { display: grid; width: 210px; grid-template-columns: repeat(3, 60px); grid-gap: 10px; } .item { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; font-size: 1.4em; background-color: black; color: white; } .item:hover { cursor: pointer; } <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>