我想知道如果我將它包裝在標簽中，為什么它不會在JavaScriptclick函式中一遍又一遍地顯示回圈結果

在這個例子中，我想在使用 for 回圈點擊按鈕時顯示 3 個復選框專案。但是為什么每次單擊事件按鈕時它都不會一遍又一遍地顯示回圈結果？我的意思是，在獲得所有 3 個專案后，如果我像<ul> ... </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>

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>";
}

如果我document.getElementById("selected_check").innerHTML = "<ul>"從這個回圈的頂部和底部移除，那么每次單擊按鈕時都會一遍又一遍地顯示結果。即使在獲得所有 3 個結果后，它仍在重復。

但我想知道為什么它會這樣并且如果我用標簽包裝就停止顯示重復的專案。

uj5u.com熱心網友回復：

當您使用：

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

您將元素中的所有HTML更新selected_check為新打開的<ul>標簽，這意味著selected_check元素中包含的任何 HTML都將替換為開始<ul>標簽。結果，所有<li>從上次單擊添加的專案都將被替換。

如果洗掉它，則其余代碼將使用.inneHTML =，它將添加/附加到selected_check元素中已包含的 HTML 的末尾，而不是替換它。

附帶說明一下，當您使用 時，您當前的代碼會多次更新您的 DOM .innerHTML，并且每次使用 時都會查詢 DOM .getElementById()。最好先構建結果，然后更新 DOM，從而將這些 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");
  
  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>

即便如此，.innerHTML通常還是最好避免，因為有更快速、更安全的操作 DOM 的方法，例如首先使用創建元素document.createElement()，然后更新 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>

標籤：javascript for循环

上一篇：添加到陣列中的額外元素

下一篇：javascript-減少異步和同步函式的陣列