I'm wondering why its not showing loop result over and over in JavaScript click function if I w-CodePudding

In this example, I wanna show 3 checkbox items on click upon a button using for loop. But why its not showing loop result over and over everytime I click on event button? I mean, after getting all 3 items in result, it likes stop executing loop if I wrap in a tag like <ul> ... </ul> here.

<form>
    <input type="checkbox" name="interest" value="Front-End Development"> Front-End Development<br>
    <input type="checkbox" name="interest" value="Back-End Development"> Back-End Development<br>
    <input type="checkbox" name="interest" value="Design"> Design
</form>
<button id="show_check">Show</button>
<p>
    <strong id="selected_check"></strong>
</p>

JavaScript:

document.getElementById("show_check").onclick = function() {
    var check = document.getElementsByName("interest");
    
    // wrapper
    document.getElementById("selected_check").innerHTML = "<ul>";

    for(var a = 0; a < check.length; a  ) {
        if(check[a].checked) {
            document.getElementById("selected_check").innerHTML  = "<li>"   check[a].value   "</li>";
        }
    }

    // wrapper
    document.getElementById("selected_check").innerHTML  = "</ul>";
}

And if I removed document.getElementById("selected_check").innerHTML = "<ul>" from top and bottom of this loop, than its showing result over and over everytime I click on button. Even after getting all 3 results its still repeating.

But I'm wondering why its act like this and stop displaying repeated items if I wrap in a tag.

CodePudding user response：

When you use:

document.getElementById("selected_check").innerHTML =  "<ul>";

you're updating all of the HTML within your selected_check element to be a newly opened <ul> tag, meaning that any of the HTML contained within the selected_check element will be replaced with the opening <ul> tag. As a result, all of the <li> items added from the previous click are replaced.

If you remove this, then the rest of your code is using .inneHTML =, which will add/append to the end of the HTML already contained within your selected_check element instead of replacing it.

As a side note, your current code is updating your DOM multiple times when you use .innerHTML, as well as querying the DOM every time you use .getElementById(). It's better to keep these DOM operations to a minimum by firstly building up your result, and then updating the DOM:

Show code snippet

document.getElementById("show_check").addEventListener("click", function() {
  const check = document.getElementsByName("interest");
  
  // Query the DOM element once and save it in a variable
  const selectedCheck = document.getElementById("selected_check");
  
  let listStr = "<ul>"; // create a string and build the HTML using that
  for (var a = 0; a < check.length; a  ) {
    if (check[a].checked) {
      listStr  = "<li>"   check[a].value   "</li>";
    }
  }
  // Once your string is built, update the DOM:
  selectedCheck.innerHTML = listStr;
});

<form>
  <input type="checkbox" name="interest" value="Front-End Development"> Front-End Development<br>
  <input type="checkbox" name="interest" value="Back-End Development"> Back-End Development<br>
  <input type="checkbox" name="interest" value="Design"> Design
</form>
<button id="show_check">Show</button>
<p>
  <strong id="selected_check"></strong>
</p>

Even with all that, .innerHTML is often best avoided, as there are quicker and safer ways of manipulating the DOM, such as creating your element first using document.createElement() and then updating the DOM:

document.getElementById("show_check").addEventListener("click", function() {
  const check = document.getElementsByName("interest");
  
  // Query the DOM element once and save it in a variable
  const selectedCheck = document.getElementById("selected_check");
  
  // create a ul element object
  const ul = document.createElement("ul"); 
  
  for (var a = 0; a < check.length; a  ) {
    if (check[a].checked) {
      // create a `<li>` object element and set its text to current value
      const li = document.createElement("li");
      li.textContent = check[a].value;
      ul.appendChild(li);
    }
  }
  // Once your ul element obejcts is built, update the DOM:
  selectedCheck.replaceChildren(ul);
  // for better browser support you can use `selectedCheck.innerHTML = ''; selectedCheck.appendChild(ul);`
});

<form>
  <input type="checkbox" name="interest" value="Front-End Development"> Front-End Development<br>
  <input type="checkbox" name="interest" value="Back-End Development"> Back-End Development<br>
  <input type="checkbox" name="interest" value="Design"> Design
</form>
<button id="show_check">Show</button>
<p>
  <strong id="selected_check"></strong>
</p>