Issue with displaying a JavaScript array into an HTML div

Question

When I try to loop through my array, the result is the entire array being displayed each time the button is clicked (doubling up). Instead I would like to have the array being displayed with the new item appended only.

Thanks :^)

<!DOCTYPE HTML>
<html>
<head>
    <title>Checklist</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script>
    $(function() {
      var arr = [];
      $("button").click(function() {
        arr.push($(":text").val());
        $(":text").val("");
        for(i in arr){
            $("#x").append(arr[i] + "<br>");
        }
        //x.text(JSON.stringify(arr));
      })
    })
    </script>
</head>
<body>  

    <input type="text" id="item" placeholder="Enter an item">
    <button id="add">Add Item</button>
    <br>
    <div id="x"></div>
</body>
</html>

Answer 1

Why don't you get the last element of the Array, and then append it, instead of using this for...in loop:

 $(function() { var arr = []; $("button").click(function() { arr.push($(":text").val()); $(":text").val(""); $("#x").append(arr[arr.length - 1] + "<br>"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="item" placeholder="Enter an item"> <button id="add">Add Item</button> <br> <div id="x"></div>

Answer 2

Call $("#x").empty() before appending value to #x ; substitute for loop for for..in loop

 <!DOCTYPE HTML> <html> <head> <title>Checklist</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(function() { var arr = []; $("button").click(function() { arr.push($(":text").val()); $(":text").val(""); $("#x").empty(); for(var i = 0; i < arr.length; i++){ $("#x").append(arr[i] + "<br>"); } //x.text(JSON.stringify(arr)); }) }) </script> </head> <body> <input type="text" id="item" placeholder="Enter an item"> <button id="add">Add Item</button> <br> <div id="x"></div> </body> </html>

alternatively, you can use arr.length -1

 <!DOCTYPE HTML> <html> <head> <title>Checklist</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(function() { var arr = []; $("button").click(function() { arr.push($(":text").val()); $(":text").val(""); $("#x").append(arr[arr.length - 1] + "<br>"); }) }) </script> </head> <body> <input type="text" id="item" placeholder="Enter an item"> <button id="add">Add Item</button> <br> <div id="x"></div> </body> </html>

Answer 3

Try this

  $(function() {
      var arr = [];
      $("button").click(function() {
          arr.push($(":text").val());
          $(":text").val("");
          $("#x").append(arr.slice(-1) + '<br>');
      })
    })

Answer 4

the new item appended only
but keep the array

 jQuery(function($) { // a better way to DOM ready var arr = [], item = $("#item"), x = $("#x"), y = $("#y"); // Cache elements $("button").click(function() { var val = item.val(); // get the input value arr.push(val); // OK, you appended to array item.val(""); // Reset input x.append(val + "<br>"); // the new item appended only y.text(JSON.stringify(arr)); // And test our array }); });

 #y{background: #eee;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="item" placeholder="Enter an item"> <button id="add">Add Item</button> <br> <div id="x"></div> <div id="y"></div>

Issue with displaying a JavaScript array into an HTML div

Question

4 answers

solution1
2 ACCPTED 2016-05-31 00:54:47

solution2
1 2016-05-31 01:00:22

solution3
0 2016-05-31 01:02:59

solution4
0 2016-05-31 01:06:57

Issue with displaying a JavaScript array into an HTML div

Question

4 answers

solution1 2 ACCPTED 2016-05-31 00:54:47

solution2 1 2016-05-31 01:00:22

solution3 0 2016-05-31 01:02:59

solution4 0 2016-05-31 01:06:57

solution1
2 ACCPTED 2016-05-31 00:54:47

solution2
1 2016-05-31 01:00:22

solution3
0 2016-05-31 01:02:59

solution4
0 2016-05-31 01:06:57