Question

我使用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(", "));

Answer 2

在排序值的循环中，每次都覆盖整个HTML内容。

尝试类似

的内容

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

Answer 3

你可以试试这个。您可以只显示整个数组，而不是使用循环显示值。编辑JS代码：

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 )
        });
    });
});

查看fiddle

Answer 4

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

用它来排序

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

4 个答案: