javascript - Pushing values into an empty array? - Stack Overflow

admin管理员组

文章数量:1390334

I'm recently new at programming and JavaScript. I'm not sure why this doesn't work. I'm trying to insert numbers into an empty array. And then have them displayed into the div with the id of "value".

My JavaScript:

var array = new Array();
// var array = [];

$(document).ready(function() {
  $('#btn').on('click', function() {
    var $input = $('#input').val();
    array.push($input);
  });
  $('#value').text(array);
  console.log(array);
});

My HTML:

<div id="number">
  <input type="text" id="input">
  <button id="btn"> Submit </button>
</div>

I'm recently new at programming and JavaScript. I'm not sure why this doesn't work. I'm trying to insert numbers into an empty array. And then have them displayed into the div with the id of "value".

My JavaScript:

var array = new Array();
// var array = [];

$(document).ready(function() {
  $('#btn').on('click', function() {
    var $input = $('#input').val();
    array.push($input);
  });
  $('#value').text(array);
  console.log(array);
});

My HTML:

<div id="number">
  <input type="text" id="input">
  <button id="btn"> Submit </button>
</div>

• javascript
• jquery
• arrays

Share Improve this question Follow edited Mar 29, 2018 at 22:15 Kasador asked Mar 29, 2018 at 22:09 KasadorKasador 42988 silver badges2020 bronze badges 4

• Which part isn't "doesn't work"? – nurdyguy Commented Mar 29, 2018 at 22:11
• Show your html too – Joab Santos Commented Mar 29, 2018 at 22:12
• Move $('#value).text(array) inside the click handler. – Jared Smith Commented Mar 29, 2018 at 22:12
• @JaredSmith Thank you so much! I realized that it just loaded once and I need to have it updated after each time I insert a new value. By moving it into my click handler did the trick. Thanks a lot! <3 – Kasador Commented Mar 29, 2018 at 22:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You render the empty array once, when the document is ready. Adding more items to the array doesn't rerender the DOM with the new items. You need to update the DOM on each click by moving $('#value').text(array); into the click event handler:

var array = new Array();
// var array = [];

$(document).ready(function() {
  var $input = $('#input');
  var $value = $('#value');

  $('#btn').on('click', function() {
    var val = $input.val();
    array.push(val);
    
    $value.text(array);
    console.log(array);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input">
<button id="btn">Add</button>
<div id="value"></div>

Just a reminder that Input Fields supply a String not an Integer.

Take a look:

var myArray = [];

$(function() {
  $('#btn').on('click', function() {
    var $input = $('#input').val();
    myArray.push(parseInt($input));
    console.log(myArray)
    $('#value').text("[" + myArray.join(", ") + "]");
  });
});

.input {
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.input input {
  width: 60px;
  height: 1.25em;
}

.input button {
  padding: .25em .6em;
}

.output {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
  <input type="number" id="input" /> <button id="btn">Add</button>
</div>
<div class="output">
  <div id="value"></div>
</div>

本文标签： javascriptPushing values into an empty arrayStack Overflow