3

I am using a for-loop to get the values of a sorted list using .html() but it is only printing the last value in the array. I thought by using myArray.length and myArray[i] in the loop that it would cycle through as expected.

Ideally, I would like this to read:

The sorted values are: 1, 2, 3, 4, 5 etc. . .

What am I doing wrong?

Fiddle here.

HTML:

<div id="wrapper">
    <div id="content">
        <h1>Let's Do Some Math</h1>
        <div id="intake">
        <input type="text" id="input"> <button id="inTakeButton">Push to Array</button> <button id="showArray">Show Array</button> <button id="doMath">Do Math</button>
        </div>
        <div id="middle">
            <ul id="list">
            </ul>
    </div>
        <div id="output">
            <p id="sorted"></p>
            <p id="sum"></p>
            <p id="average"></p>
        </div>
    </div>
</div>

CSS:

#wrapper{
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 5px 5px 10px 3px black;
    padding: 10px;
}

h1 {
    text-align: center;
    color: orange;
    text-shadow: 1px 1px blue;
}

#intake {
    text-align: center;
}

JavaScript:

myArray = [];
var theTotal;
$(document).ready(function() {
    $('#inTakeButton').on('click', function() {
        var inputValue = parseFloat($('#input').val());
        if (inputValue === "") {
            return;
        }
        if (isNaN(inputValue)) {
            $('#input').val("");
            return;
        }
        myArray.push(inputValue);
        $('#input').val("");
    });
    $('#showArray').on('click', function() {
        console.log(myArray);
        $('#list').html("");
        for (var i = 0; i < myArray.length; i++) {
            $('#list').append("<li>" + myArray[i] + "</ul>");
        };
        $('#doMath').on('click', function() {
            theTotal = 0;
            for (var i = 0; i < myArray.length; i++) {
              theTotal = theTotal + myArray[i];  
            };
            $('#sum').html("");
            $('#sum').html("The sum is: " + theTotal);
            var average = (theTotal/myArray.length);
            $('#average').html("");
            $('#average').html("The mean value is: " + average);
            var sorted = myArray.sort();
            $('#sorted').html("");
            for (var i = 0; i < myArray.length; i++) {
             $('#sorted').html("The sorted values are: <br>" + myArray[i] + ", ");   
            };
        });
    });
});
4
  • You have a tag mismatch: $('#list').append("<li>" + myArray[i] + "</ul>");
    – Taplar
    Oct 23, 2015 at 12:10
  • 1
    In your loop for the sorted values, you are overriding the entire HTML content each time.
    – Mr Pablo
    Oct 23, 2015 at 12:10
  • Just use $('#sorted').html("The sorted values are: <br>" + sorted ); without the loop.
    – pawel
    Oct 23, 2015 at 12:11
  • In your second loop, you use .html() not .append()
    – Bergi
    Oct 23, 2015 at 12:11

4 Answers 4

7

You don't even need to use loop trough the array to do this, just:

$('#sorted').html("The sorted values are: <br>" + myArray.join(", ")); 
3
  • Ding! Ding! Ding! We have a winner folks!
    – Brad Evans
    Oct 23, 2015 at 12:15
  • Just to be clear, does using .join(", ") only join the comma when it's printed and the array is kept as numbers only?
    – adin
    Oct 23, 2015 at 12:35
  • That's correct. .join() loops trough your array and return a string, without modifying the original array.
    – alvarodms
    Oct 23, 2015 at 12:47
2

In your loop for the sorted values, you are overriding the entire HTML content each time.

Try something like

for (var i = 0; i < myArray.length; i++) {
     $('#sorted').append(myArray[i] + ", ");
};
1

You can try this. Instead of showing the values using a loop, you can just display the whole array at once. Edited JS code:

myArray = [];
var theTotal;
$(document).ready(function() {
    $('#inTakeButton').on('click', function() {
        var inputValue = parseFloat($('#input').val());
        if (inputValue === "") {
            return;
        }
        if (isNaN(inputValue)) {
            $('#input').val("");
            return;
        }
        myArray.push(inputValue);
        $('#input').val("");
    });
    $('#showArray').on('click', function() {
        console.log(myArray);
        $('#list').html("");
        for (var i = 0; i < myArray.length; i++) {
            $('#list').append("<li>" + myArray[i] + "</ul>");
        };
        $('#doMath').on('click', function() {
            theTotal = 0;
            for (var i = 0; i < myArray.length; i++) {
              theTotal = theTotal + myArray[i];  
            };
            $('#sum').html("");
            $('#sum').html("The sum is: " + theTotal);
            var average = (theTotal/myArray.length);
            $('#average').html("");
            $('#average').html("The mean value is: " + average);
            var sorted = myArray.sort();
            $('#sorted').html("The sorted values are: <br>" + myArray )
        });
    });
});

Check out the fiddle

0
var sorted =  myArray.sort(function (a, b) {
   return a - b;
});

use this for sorting

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.