在数组中,如何以我希望打印的方式而不是最后一个值来打印值？

Question

我使用a for-loop来获取排序列表的值,.html()但它只打印数组中的最后一个值.我想通过使用myArray.length并myArray[i]在循环中它将按预期循环.

理想情况下,我希望这样:

排序值为:1,2,3,4,5等..

我究竟做错了什么？

在这里小提琴

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] + ", ");   
            };
        });
    });
});

Answer 1

你甚至不需要使用数组循环来做到这一点,只需:

$('#sorted').html("The sorted values are: <br>" + myArray.join(", "));