JavaScript переменная, обработанная в течение l oop, не изменяется вне цикла - PullRequest
Новая
       4

JavaScript переменная, обработанная в течение l oop, не изменяется вне цикла

0 голосов
/ 17 января 2020

Я пытаюсь обработать переменную внутри для l oop: 

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>

Каждую итерацию я получаю правильное значение "link" var в alert, но если я пытаюсь поместить его в div после l oop, он всегда возвращает оригинал значение, как будто оно не было обработано l oop вообще ("download_file / attr =").

Требуется только значение последней итерации.

Я пытался присвоить его новому глобальному var создание функции, которая принимает "link" в качестве аргумента и возвращает ее в глобальную переменную, но не смогла получить значение ссылки извне для l oop.

EDIT:

Просто поняла, что это работает, но не может отображаться в Html из-за "<>". Я новичок в кодировании и в html, так что это глупая ошибка. Конечно все работает, когда я ставлю ссылку на консоль. Спасибо, что помогли мне заметить эту ошибку! Функция генерирует ссылку, которую мое веб-приложение анализирует, и я только помещаю ее в div для отладки.

1 Ответ

0 голосов
/ 17 января 2020

Ваш оператор if проверяет, являются ли элементы div checked, что никогда не будет истинным, поскольку вы не можете проверить div. Для работы кода вам понадобятся флажки или переключатели.

Кроме того, если вы сразу же запустите функцию, как и вы, она запустится до того, как какой-либо из элементов получит возможность проверить. Вы должны настроить функцию как обратный вызов для события click для элементов.

Кроме того, поскольку вы используете .innerHTML, любая разметка не будет отображаться на странице. Но если вы используете .textContent, вы сможете увидеть непарсированное значение.

Наконец, не используйте .getElementsByClassName(), никогда . Это API старше 25 лет, который очень ресурсоемкий (особенно при использовании с циклами) и просто не будет d ie из-за его продолжительного использования, не понимая, что он делает. Вместо этого используйте .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>
...