1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript Loop Question

Discussion in 'JavaScript' started by energylevels, Apr 18, 2022.

0
  1. #1
    Need help with some Javascript, I'm trying to populate all text inputs with the filename from the file input. Only one text input is populated. Thanks in advance:

    
<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>
    Code (markup):
     
    energylevels, Apr 18, 2022 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Your logic is inside-out, you should be looping INSIDE the event, not around it. You're also overthinking it since you do a perfectly good querySelectorAll at the start, meaning you shouldn't be needing to waste time screwing around with getElementById inside the event. Also this is 2022 not 1998, don't directly use onInput unless you literally just created the element on the DOM. Use addEventListener.

    You also might be better off just walking the DOM instead of dicking around with querySelectorAll, letting you kill off the ID's and the classes.

    <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>
    Code (markup):
    Remember, getElement(s)ByXXX and querySelector(all) are slow, so try not to call them more than you need to, and avoid using them inside events. Likewise arrays and iterables are slow compared to just walking the DOM. Add a container -- like a fieldset -- hook onto it's first element child, and then walk the siblings. INSIDE the event, not around it.[/s]
     
    Last edited: Apr 23, 2022
    deathshadow, Apr 23, 2022 IP