Вопрос по циклу Javascript

Lazary

Нужна помощь с Javascript, я пытаюсь заполнить все текстовые поля именем файла из входного файла. Заполнен только один текстовый ввод. Заранее спасибо:

 


<html>


<head>


<title>Untitled Document</title>


<meta charset="utf-8">


</head>


<body>


<form>


<input type="file" id="fileinput"><br>


<input type="text" id="textinput_1" class="countme"><br>


<input type="text" id="textinput_2" class="countme"><br>


<input type="text" id="textinput_3" class="countme"><br>


<input type="text" id="textinput_3" class="countme">


</form>


<script>


const countAll = document.querySelectorAll('.countme').length; // Count elements


console.log(countAll); // 3


for (let i = 1; i < countAll; i++) {


const textinput = document.getElementById('textinput_' + i); // textinput_1, textinput_2, etc


document.getElementById('fileinput').oninput = function() {


textinput.value = document.getElementById('fileinput').files[0].name;


}


}


</script>


</body>


</html>

Код (разметка):

JamboIV

Ваша логика вывернута наизнанку, вы должны зацикливаться ВНУТРИ события, а не вокруг него.

Вы также слишком много об этом думаете, поскольку в начале вы выполняете очень хороший запросSelectorAll, а это означает, что вам не нужно тратить время на возню с getElementById внутри события.

Кроме того, сейчас 2022 год, а не 1998 год, не используйте onInput напрямую, если только вы буквально не создали элемент в DOM.

Используйте addEventListener. Возможно, вам также лучше просто пройтись по DOM, а не возиться с querySelectorAll, позволяя вам уничтожить идентификаторы и классы.

 <form>


<input type="file" id="fileinput"><br>


<fieldset id="counts">


<input type="text"><br>


<input type="text"><br>


<input type="text"><br>


<input type="text">


</fieldset>


</form>


<script>


{ // isolate scoope


const


fileInput = document.getElementById("fileInput"),


countSet = document.getElementById("counts");


fileInput.addEventListener("input", (event) => {


let input = countSet.firstElementChild;


if (input) do {


input.value = fileInput.files[0].name;


} while (input = input.nextElementSibling);


} );


}


</script>

Код (разметка). Помните, что методы getElement(s)ByXXX и querySelector(all) работают медленно, поэтому старайтесь не вызывать их чаще, чем необходимо, и избегайте использования их внутри событий.

Точно так же массивы и итерации работают медленнее по сравнению с простым перемещением по DOM.

Добавьте контейнер, например набор полей, зацепите его первый дочерний элемент, а затем пройдите по братьям и сестрам.

ВНУТРИ события, а не вокруг него.

Похожие темы	Дата
Angular 4 с Нуля до Профи (2017) - WebForMySelf	19.10.2024, 18:10
[специалист] Javascript. Уровень 3. Knockout.js. [борисов И.о.]	19.10.2024, 18:10
Javascript И Jquery. Исчерпывающее Руководство (3-е Издание)	19.10.2024, 18:10
[Udemy] Практический JavaScript (Продвинутый уровень) (2020) [Иван Петриченко]	19.10.2024, 18:10
[Loftschool] React.js.Разработка веб-приложений	19.10.2024, 18:10
React.js для начинающих	19.10.2024, 18:10
How to Get File Upload Progress in Ajax using jQuery	19.10.2024, 18:10
Помогите объединить 2 скрипта.	19.10.2024, 18:10
Остановить воспроизведение звука при закрытии видеоплеера	19.10.2024, 18:10
Сборник курсов AngularJS (2017)	19.10.2024, 18:10

Вопрос по циклу Javascript

Lazary

JamboIV

I AM

Интересно