如何在 div 中每次单击时打印增加的数值？

Question

how can i print increasing number value on every click inside divs?

here my divs that i want to insert numbers on every click

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>

Answer 1

If I understand you correctly then you can do something like seen inside of this:

 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>

Passing this into the function called by onclick passes in the element that the property is found. Meaning that the function will always run the code correct to the clicked on function.

Answer 2

 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>

did you mean it? if yes, tell me to explain it...

Answer 3

A modern approach would be to strip out all of the inline JS from the HTML, and use event delegation to catch events from the container's child elements.

The listener calls a function that initialises a count (no need for global variables), and then returns a new function ( a closure ) that will act as the handler for the click listener. When it's returned it carries with it a copy of 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>