Is there a way to input a unique number for each array output?

Question

I am trying to number each result so that it says:

City #1 is Los Angeles. City #2 is San Francisco. City #3 is... and so on.

I was thinking that I had to write something inside the for loop?

I am working with Notepad++.

<html>
 
<body style="text-align: center;">
 
    <h2 id="hi">Enter Your Five Favorite Cities</h2>
    <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>
 
    <h3 id="hi">Results</h3>
 
    <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];
                r = r + "City #" + "???" + "is " + a.value + ("<br>");
            }
            document.getElementById("output").innerHTML = r;
        }
    </script>
    
    
</body>
 
</html>

The i index you use in the loop is an unique number, so r = r + "City " + i + " is " + a.value + ("<br>"); or something? — Shilly
– Shilly, Commented Sep 1, 2022 at 15:25

Shilly · Accepted Answer · 2022-09-01 15:27:51Z

1

As quoted, you can use the index of the loop to know the city count.

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

    for (var i = 0; i < input.length; i++) {
        var a = input[i];
        r = r + "City #" + ( i + 1 ) + " is " + a.value + ("<br>");
    }
    document.getElementById("output").innerHTML = r;
}

    <h2 id="hi">Enter Your Five Favorite Cities</h2>
    <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>
 
    <h3 id="hi">Results</h3>
 
    <p id="output"></p>

answered Sep 1, 2022 at 15:27

Shilly

8,5991 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Over a year ago

Might be worth looking at template strings to remove all that concatenation.

Shilly Over a year ago

Absolutely true, but in my very humble opinion, I doubt it's within the OPs current level of JS experience. So including templates would only confuse them.

Collectives™ on Stack Overflow

Is there a way to input a unique number for each array output?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related