在 for 循环中处理的 JavaScript var 在循环外不会改变答案

【问题标题】：JavaScript var processed in for loop don't change outside the loop在 for 循环中处理的 JavaScript var 在循环外不会改变
【发布时间】：2020-01-17 18:31:56
【问题描述】：

我正在尝试在 for 循环中处理变量：

function DownloadSelected() {

  var link = "download_file/attr=";
  var inputElements = document.getElementsByClassName('ImgFtpLink');
  for (var i = 0; inputElements[i]; ++i) {
    if (inputElements[i].checked) {
      //alert(inputElements[i].id);
      link += "<ftplink=" + inputElements[i].id + ">";
      alert(link);
    }
  }

  document.getElementById("infobar").innerHTML = link;
}

DownloadSelected();

<div class="ImgFtpLink" id="one"></div>
<div class="ImgFtpLink" id="two"></div>
<div class="ImgFtpLink" id="three"></div>

<div id="infobar"></div>

每次迭代我都会在警报中获得正确的“链接”变量值，但是如果我尝试在循环后将它放入 div 中，它总是返回原始值，就像它根本没有被循环处理一样（“download_file/attr=”） .

只需要最后一次迭代值。

我试图将它分配给新的全局变量，创建以“链接”作为参数并将其返回给全局变量的函数，但没有设法在 for 循环之外获取链接值。

编辑：

刚刚意识到它可以工作但由于“”而无法在Html中显示。我是编码和 html 的新手，所以这是一个愚蠢的错误。当然，当我将链接放到控制台时，一切正常。感谢您帮助我注意到这个错误！函数正在生成我的网络应用程序解析的链接，我只是将它放到 div 中以进行调试。

【问题讨论】：

你确定吗？您在每次迭代时附加<ftplink=...>，即使它们存在，它也绝对不会显示在页面上，因为尖括号表示 HTML 元素。当然，ftplink=... 也不是有效的 HTML 元素，所以我不确定您要做什么。你为什么使用尖括号？（如果必须显示，请改用&gt; 和&lt;。）
请发布所有相关代码，以便我们可以复制您的问题（HTML、CSS）。另外，don't use .getElementsByClassName()，永远。
您的if 语句正在检查元素是否为.checked，但永远不会检查div 元素，因此您的循环中没有发生任何事情。您是否注意到，当您在上面运行代码时，没有显示任何 alert？

标签： javascript loops for-loop scope

【解决方案1】：

您的if 语句正在检查div 元素是否为checked，这永远不会是真的，因为您无法检查div。您需要复选框或单选按钮才能使代码正常工作。

此外，如果您立即运行该函数，就像您正在做的那样，它将在任何元素有机会被检查之前运行。您应该将该函数设置为元素的click 事件的回调。

此外，由于您使用的是.innerHTML，因此页面上不会显示任何标记。但是，如果您使用.textContent，您将能够看到未解析的值。

最后，do not use .getElementsByClassName(), ever。这是一个有 25 年历史的 API，它非常占用资源（尤其是在与循环一起使用时），并且不会因为在不了解它的作用的情况下继续使用而死掉。请改用.querySelectorAll()。

function DownloadSelected(event) {

  // Only run when the right elements have been clicked
  if(event.target.classList.contains("ImgFtpLink")){
  
    var link = "download_file/attr=";
    var inputElements = document.querySelectorAll('.ImgFtpLink');
    for (var i = 0; inputElements[i]; ++i) {
      if (inputElements[i].checked) {
        link += "<ftplink=" + inputElements[i].id + ">";
        alert(link);
      }
    }
  }

  document.getElementById("infobar").textContent = link;
}

document.addEventListener("click", DownloadSelected);

<input type="checkbox" class="ImgFtpLink" id="one">
<input type="checkbox" class="ImgFtpLink" id="two"></div>
<input type="checkbox" class="ImgFtpLink" id="three"></div>

<div id="infobar"></div>

【讨论】：