CODEWITHSUNDEEP
javascriptjqueryhtml
Alexander
Alexander

Reputation: 29

Issue with displaying a JavaScript array into an HTML div

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>

Upvotes: 0

Views: 53

Answers (4)

Gabriel Godoy
Gabriel Godoy

Reputation: 251

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>

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

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>

Upvotes: 0

codemax
codemax

Reputation: 1352

Try this

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

Upvotes: 0

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

Related Questions