Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Trying to print out both loops:

City #1 is...
City #2 is...
and so on until City #5

City #5 is...
City #4 is...
and so on until City #1

My code is only printing out the last results after passing through the while loop.

<html>
 
<body style="text-align:center;">
 
	<h1>Enter Your Five Favorite Cities</h1>
	<form class="" action="index.html">
        <input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
	<br>
        <button type="button" name="button" onclick="favoriteCities()">Submit</button>
   
    </form>
 
	<h2>Results</h2>
 
    <p id="output1"></p>
	<p id="output2"></p>

    
	<script type="text/javascript">
        var r = "";
        function favoriteCities() {
            var input = document.getElementsByName('favoriteCities[]');
 
            for (var i = 0; i < input.length; i++) {
                var a = input[i]; var uniqueNumber=i+1;
                r = r + "City #" + uniqueNumber + " is " + a.value + ("<br>");
            }
            document.getElementById("output1").innerHTML = r;
			}
    </script>
	
	<script type="text/javascript">
		function favoriteCities() {
			var input = document.getElementsByName('favoriteCities[]');
			let i = input.length, r = '';
			while (i > 0) {
			r += `City #${i} is ${input[i-1].value} <br>`; i--;
			}
			document.getElementById("output2").innerHTML = r;
			}
	</script>
	
</body>
 
</html>


What I have tried:

HTML
<script type="text/javascript">
        var r = "";
        function favoriteCities() {
            var input = document.getElementsByName('favoriteCities[]');
 
            for (var i = 0; i < input.length; i++) {
                var a = input[i]; var uniqueNumber=i+1;
                r = r + "City #" + uniqueNumber + " is " + a.value + ("<br>");
            }
            document.getElementById("output1").innerHTML = r;
			}
    </script>
	
	<script type="text/javascript">
		function favoriteCities() {
			var input = document.getElementsByName('favoriteCities[]');
			let i = input.length, r = '';
			while (i > 0) {
			r += `City #${i} is ${input[i-1].value} <br>`; i--;
			}
			document.getElementById("output2").innerHTML = r;
			}
	</script>
Posted
Updated 1-Sep-22 17:34pm
Comments
Member 15627495 1-Sep-22 23:11pm    
as comments and advices :
keep the html keywords fot html,
because you use : 'input' in your Js.
It's to avoid confusing the 'input' html tag, and your js script vars.

rename your second function with another name,you have twice 'favoritecities()'
and do :

onclick="favoriteCities();reversefavoriteCities();"
machinewraith 2-Sep-22 11:54am    
I am a little confused by the first part of your comment regarding the html keyword, but the second part of your comment worked perfectly - thank you, good sir.
Member 15627495 2-Sep-22 23:04pm    
It's about 'naming convention' and 'readability' for your code.
you use 'var input =' , knowing input as a native Html Keyword,
It's opening to misreading ( for you ) or the Js engine,
this way of naming vars can leads you to a bad code writing, so faulty code sometimes.

the things to remind you : keep native keywords ( input , body , div and all the others , new , this , let ... ) for what they are.
you'll be stuck by a bug one day, calling a var :"document" or "let".

It's keywords from APIs, so , try to keep them for the APIs.
Member 15627495 2-Sep-22 23:18pm    
Js Engine loads a page in the DOM, with functions in.

The error you made is to define two functions with the same name,
so the Js engine loads the first function, but rewrite the definition with the second function. ( because of the same name )

It result a display,by a missing 'first function apply' ( sequential read and execution of your code , Css work the same way , in sequential access from top to bottom of the code ).

1 solution

<html>
 
<body style="text-align:center;">
 
	<h1>Enter Your Five Favorite Cities</h1>
	<form class="" action="index.html">
        <input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
        <br>
		<input type="text" name="favoriteCities[]" value="" /><br>
	<br>
        <button type="button" name="button" onclick="favoriteCities();reversefavoriteCities();">Submit</button>
   
    </form>
 
	<h2>Results</h2>
 
    <p id="output1"></p>
	<p id="output2"></p>

    
	<script type="text/javascript">
        var r = "";
        function favoriteCities() {

            document.getElementById("output1").innerHTML = r;

            var coll = document.getElementsByName('favoriteCities[]');
 
            for (var i = 0; i < coll.length; i++) {
               
                r = r + "City #" + eval(i+1) + " is " + coll[i].value + "<br>";
            }
            document.getElementById("output1").innerHTML = r;
			}
    </script>
	
	<script type="text/javascript">
		function reversefavoriteCities() {
			
           
			}
	</script>
	
</body>
 
</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900