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>
Rajaprabhu Aravindasamy
67.2k17 gold badges107 silver badges133 bronze badges
2 Answers 2
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>
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
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
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.
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>
answered Mar 10, 2016 at 19:07
Rajaprabhu Aravindasamy
67.2k17 gold badges107 silver badges133 bronze badges
2 Comments
SezKo
I'm so sorry. Now working. I did not pay attention to the spelling mistakes
Rajaprabhu Aravindasamy
@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! :)
lang-js