在 for 循环中添加 onClick 事件

Question

I am a beginner in Javascript. What I am trying to do is when a user clicks on "Click to start loop", the first <li> will be 1. The second time the user clicks it, it will be 2, and the third time, it will be 3. After the third click, the loop will break.

The issue with my code is that it always displays the number 3 instead of starting from 1 and going all the way to 3.

 function myFunction() { demo = document.getElementById("demo") ul = document.createElement("ul") demo.appendChild(ul) li = document.createElement("li") ul.appendChild(li) for (let i = 1; i <= 3; i++){ li.innerText = i } }

 <p id="demo" onclick="myFunction()">Click to start loop</p>

Answer 1

It is because, there is only one 'li' element created before loop starts and at the end of loop, it is just updating the final innterText.

You can fix it by moving li creation code to loop

function myFunction() {
demo = document.getElementById("demo") 
ul = document.createElement("ul")
demo.appendChild(ul)
                       <--- from here

for (let i = 1; i <= 3; i++){   
    li = document.createElement("li")  <--- to here
    ul.appendChild(li)     
    li.innerText = i     
}

}

Answer 2

You just have to save the current loop value in some place:

 let i = 1; function myFunction() { // Check for i value if (i === 4) return; demo = document.getElementById("demo") ul = document.createElement("ul") demo.appendChild(ul) li = document.createElement("li") ul.appendChild(li) // Update the i value li.innerText = i++; }

 <p id="demo" onclick="myFunction()">Click to start loop</p>

Answer 3

One solution could be to create a global variable with initial value set to 1 and increase it every time there is a click on your <p> tag.

I have implemented the same using the global variable counter .

 <p id="demo" onclick="myFunction()">Click to start loop</p> <script> var counter = 1; function myFunction() { if(counter === 4){ return; } demo = document.getElementById("demo"); ul = document.createElement("ul"); demo.appendChild(ul); li = document.createElement("li"); ul.appendChild(li); li.innerText = counter; counter++; } </script>

Answer 4

I think you should put li = document.createElement("li") inside of the loops

index.js

function myFunction(status) {
    demo = document.getElementById("demo") 
    ul = document.createElement("ul")
    demo.appendChild(ul)
                
    for (let i=1; i<=3; i++) {
        li = document.createElement("li")     
        li.innerText = i     
        ul.appendChild(li) 
    }
}

Answer 5

This is unclear, are you looking for javascript function generator ?

 const ul_List = document.body.appendChild( document.createElement('ul') ), generator = (function* () { for (let i = 0; (++i < 4);) { ul_List.appendChild( document.createElement('li') ).textContent = i yield } })()

 <p id="demo" onclick="generator.next()" >Click to 3 times loop</p>

Answer 6

Counters

A function that deals with an incrementing variable (aka counter) usually declares or defines it as a number outside of a loop then iterates the variable with a ++ or += operator within the loop. But would a loop within an event handler that increments a number by +1 per click make much sense? So forget about iterations based on a single run of a function/event handler.

The next problem is that once the function/event handler is done, the counter is garbage collected (deleted from memory), so on the next click it is back to what it was initially (usually 0) -- so you need the user to click a HTML element, increase a number by one, and increase it by one per click thereafter. There a few ways to keep the counter's last value:

HTML/DOM

• Store the last value in a HTML form control by [value]

  let counter = 0; counter++; document.forms[0].count.value = counter; .... <input id='count' type='hidden' value='0'><!--value will be '1'-->

• Store the last value in any other type of HTML element by [data-*] or text content

  document.querySelector('.count').dataset.idx = counter; .... <nav class='count' data-idx='1'></nav> document.querySelector('aside').textContent = counter; .... <aside>2</aside>

• Keep in mind any value stored in HTML is converted into a string so when getting the variable counter value you must convert it back into a real number:

   parseInt(document.forms[0].count.value); parseFloat(document.querySelector('.count').dataset.idx); Number(document.querySelector('aside').textContent);

Closures

A better way IMO is to deal with variable scope. If you noticed in the previous code, let and const are used instead of var . The reason for this is scope.

Function Scope: If var was used, then all variables would be influenced by anything inside or the immediate outside of the function it is in. If completely outside of all functions then it is global (much more susceptible to side effects and buggy behavior).

Block Scope: let and const scope is block which means they can only be accessed within the brackets they are located in:

var G = `any function, method, expression, etc can affect it or be affected
         by it`;
function clickHandler(e) {
  var L = `vulnerable to anything within the function and immediately 
           outside the function`;
  if (e.target.matches('button')) {
    let A, 
    const B = `only affects or get affected only by things within the 
               brackets`;
    var C = `even buried deep within a function it will be hoisted to be 
             accessible to everything within this function`;
  }
  function addItem(node, count) {
    /* Although a function defined within another function it cannot access 
      A or B*/
  }
}

Wrapping a function/event handler in another function in order to provide an isolated scope and an environment wherein variables can exist past runtime and avoid garbage collection is a closure . The following examples are closures #1 is simple and #2 is more refined (user can edit each list item directly). Go here for details on scope and closures.

Example 1

 function init() { const ul = document.querySelector('ul'); let i = 0; function clickHandler(e) { i++; addItem(this, i); } ul.onclick = clickHandler; }; function addItem(list, counter) { const li = document.createElement('li'); list.append(li); li.textContent = counter; }; init();

 <ul>Click to Add Item</ul>

Example 2

 function init() { const ui = document.forms[0]; let counter = 1; function addItem(event) { const clicked = event.target; if (clicked.matches('legend')) { const list = clicked.nextElementSibling; let marker = `${counter++}`.padStart(2, '0'); list.insertAdjacentHTML('beforeEnd', `<li contenteditable data-idx="${marker}"></li>`); } } ui.onclick = addItem; }; init();

 form { font: 1.5ch/1 Consolas; } legend { font-size: large; font-weight: bold; user-select: none; cursor: pointer; } legend::after { content: 'Click to Add Item'; font-size: small; } ul { list-style: none; } li { margin: 5px 11px 5px 9px; padding: 4px 8px; border-bottom: 1px solid #980; } li::marker { display: list-item; content: attr(data-idx)'.'; margin-bottom: -2px; }

 <form> <fieldset> <legend>List<br></legend> <ul></ul> </fieldset> </form>