Jquery dynamic array

Question

I want to create a dynamic array with data from the input. Later I want to write the collected data to the in div. How can I do that?

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<p>Click the button to add a new element to the array.</p>
<input type="text" id="data">
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Add</button>
<p id="demo"></p>
<script>
   var fruits = [];
   function myFunction() {
     var x=$("#data").val();
     fruits.push(x); 
     $("#data").val("");
     for(var i=0;i<fruits.length;i++) {
       $("#demo").html(fruits[i]);
     }
    }

</script>
</body>
</html>

Yousaf Hassan · Accepted Answer · 2016-03-11 05:18:57Z

1

I am not sure what are exactly trying to achieve but you need to set a criteria for the input e.g comma separated values.

Or split them on basis of a space character.

then do it the following way,

<script>
    var fruits = [];
    function myFunction() {
       var x=$("#data").val().split(' '); // Use .split(',') if you want to split them on basic of a comma
       $("#data").val("");
       for(var i=0;i<x.length;i++) {
          fruits.push(x[i]);
       }
       // Now you have the array containing the fruits, add them to DOM
       $("#demo").html(fruits.join('<br/>')); // Single fruit per line
    }
</script>

edited Mar 11, 2016 at 5:18

answered Mar 10, 2016 at 19:15

Yousaf Hassan

4944 silver badges14 bronze badges

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

2 Comments

SezKo Over a year ago

Thanks for answer. The code works. But I want you to come in after the data has been entered previously entered data. Here only the entered value is added to the previous value. For example, when a value of 1, enter 2 after entering the 1 and the 2, I want to come together.

Yousaf Hassan Over a year ago

Well if you want to enter values one by one and add them to the array then your code is already fine, just remove the loop from your code and put $("#demo").html(fruits.join('<br/>')); this line of code instead of the loop. or you can also use the .append() function that way you won't even need an array.

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-10 20:46:06Z

1

Try to append the htmlString. You are replacing it.

var htmlString = ""
for(var i=0;i<fruits.length;i++) {
  htmlString += fruits[i];
}
$("#demo").html(htmlString);

And the full code would be,

<script>
  var fruits = [];
  function myFunction() {
   var x=$("#data").val();
   fruits.push(x); 
   $("#data").val("");
    var htmlString = ""
    for(var i=0;i<fruits.length;i++) {
      htmlString += fruits[i];
    }
    $("#demo").html(htmlString);
  }
</script>

And the perfect approach would be,

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <body>
    <p>Click the button to add a new element to the array.</p>
    <input type="text" id="data">
    <button id="try">Try it</button>
    <button>Add</button>
    <p id="demo"></p>
    <script>
      var fruits = [];
      var data = $("#data");
      var demo = $("#demo");
      $("#try").click(function(){
         fruits.push(data.val());
         data.val("");
         demo.html(fruits.join(" "));
      });
    </script>
  </body>
</html>

edited Mar 10, 2016 at 20:46

answered Mar 10, 2016 at 19:07

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

2 Comments

SezKo Over a year ago

I'm so sorry. Now working. I did not pay attention to the spelling mistakes

Rajaprabhu Aravindasamy Over a year ago

@SezKo Glad to help! Try to press the tick mark present inside of any one of the answers here. That would help the future visitors to spot the right answer. And this is not a compulsion! :)

Collectives™ on Stack Overflow

Jquery dynamic array

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related