JavaScript var processed in for loop don't change outside the loop

Question

I'm trying to process variable inside for loop:

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>

Every iteration I get proper value of "link" var in alert but if I try to put it in div after loop, it always returns original value like it was not processed by loop at all ("download_file/attr=").

Need only last iteration value.

I was trying to assign it to new global var, making function that takes "link" as argument and returns it to global var but didn't manage to get link value outside for loop.

EDIT:

Just realised that it works but can't be displayed in Html because of "<>". I'm new to coding and to html so it's stupid mistake. Of course everything works when I put link to the console. Thanks for helping me to notice this mistake! Function is generating link that my web app parse and I was only putting it to div for debug purpose.

Are you sure about that? You're appending `` at each iteration, which definitely won't display on the page, even if they're there, since angle brackets signify an HTML element. Of course, `ftplink=...` is not a valid HTML element, either, so I'm not sure what you're trying to do. Why are you using angle brackets? (If they must display, use `>` and `<` instead.) — IceMetalPunk, Jan 17 '20 at 18:36
Please post all the relevant code so that we can replicate your issue (HTML, CSS). Also, [don't use `.getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474), ever. — Scott Marcus, Jan 17 '20 at 18:36
Your `if` statement is checking to see if the elements are `.checked` but `div` elements will never be checked so nothing is happening in your loop. Don't you notice that when you run your code above, no `alert` ever displays? — Scott Marcus, Jan 17 '20 at 18:40

score 0 · Answer 1 · answered Jan 17 '20 at 18:58

Your if statement is checking to see if div elements are checked, which will never be true because you can't check a div. You'll need checkboxes or radio buttons for the code to work.

Also, if you run the function immediately, as you are doing, it will run before any of the elements get a chance to become checked. You should set up the function to be a callback to a click event for the elements.

Also, because you are using .innerHTML any markup won't be displayed on the page. But, if you use .textContent you'll be able to see the unparsed value.

Finally, do not use .getElementsByClassName(), ever. This is a 25+ year old API that is very resource intensive (especially when used with loops) and simply will not die due to its continued use without understanding what it does. Instead, use .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>

JavaScript var processed in for loop don't change outside the loop

1 Answers1