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>

"Instead I would like to have the array being displayed with the new item appended only" Are you trying to display only the last value added to arr? What is purpose of for..in loop? Why do you use .append()? — guest271314
– guest271314, Commented May 31, 2016 at 0:56

Roko C. Buljan · Accepted Answer · 2016-05-31 09:09:04Z

2

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>

edited May 31, 2016 at 9:09

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered May 31, 2016 at 0:54

Gabriel Godoy

2612 silver badges8 bronze badges

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

3 Comments

Spencer Wieczorek Over a year ago

I don't think they want to modify the array to simply display an element.

Gabriel Godoy Over a year ago

Fixed it without changing original array, and updated codepen. @SpencerWieczorek

Alexander Over a year ago

I like this answer (the changed one), most clean.

guest271314 · Accepted Answer · 2016-05-31 01:00:22Z

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>

Both useful answers, someone answered it quicker though. Thanks.

codemax · Accepted Answer · 2016-05-31 01:02:59Z

0

Try this

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

answered May 31, 2016 at 1:02

codemax

1,35210 silver badges20 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2016-05-31 01:06:57Z

0

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>

answered May 31, 2016 at 1:06

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

Spencer Wieczorek Over a year ago

It's not necessarily a "better" way if the OP is only using just jQuery; also considering $.noConflict() isn't even being called in the case when you would use this when many libraries are being used.

Roko C. Buljan Over a year ago

@SpencerWieczorek better != best.

Collectives™ on Stack Overflow

Issue with displaying a JavaScript array into an HTML div

4 Answers 4

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related