Reversing output of user input by using while loop-CodePudding

Does anyone know of a good video/article to better understand for and while loops? I'm trying to reverse the output from the for loop but the resources that I've read and watched don't seem to be helping. I'm just guessing at this point.

I commented out the while loop I am currently working with.

<html>
 
<body style="text-align:center;">
 
    <h1>Enter Your Five Favorite Cities</h1>
    <form  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="output"></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("output").innerHTML = r;
            
            //while (4 = input.length) {
            //print (output)
            //}
        }
        
    </script>
    
</body>
 
</html>

CodePudding user response：

Use this line: for (var i = input.length - 1; i >= 0; i--) {. This starts i at input.length - 1 and counts down to 0. It prints in reverse order.

var r = "";
function favoriteCities() {
    var input = document.getElementsByName('favoriteCities[]');

    for (var i = input.length - 1; i >= 0; i--) {
        var a = input[i]; var uniqueNumber=i 1;
        r = r   "City #"   uniqueNumber   " is "   a.value   ("<br>");
    }

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

    //while (4 = input.length) {
    //print (output)
    //}
}

<html>
 
<body style="text-align:center;">
 
    <h1>Enter Your Five Favorite Cities</h1>
    <form  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="output"></p>
    
</body>
 
</html>

CodePudding user response：

I think you want 2 things here - example of a while loop and example of using it to go in reverse. While is like for - it uses a comparison to determine when it's done. So here, we tell it to count the number of cities and start with the last and go backwards, using i--. Also, you can use backticks and ${} to have inline varaibles in your strings. This makes it a bit easier to read.

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("output").innerHTML = r;
}

<h1>Enter Your Five Favorite Cities</h1>
<form  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="output"></p>

CodePudding user response：

The historic method (in the C family of languages at least) of traversing an array from last to first element is

for( var i = array.length; i--;) {
    // code using i as array index
}

It works because i is truthy when in the range 1 to array.length, but use of the post decrement operator in i-- converts i to a zero based index inside the loop.

To reverse the elements in an existing array in place you can use the Array.prototype.reverse method.

To reduce an array to a single value (which can be an array) by processing elements in last to first order, you can use the Array.prototype.reduceRight method.