Помещать значения в пустой массив?

Я недавно новичок в программировании и JavaScript. Я не уверен, почему это не работает. Я пытаюсь вставить числа в пустой массив. А затем отобразите их в div с идентификатором «value».

Мой 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.info(array);
});

Мой HTML:

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

Какая часть не "не работает"?

— 30.03.2018 00:11

Покажи и свой html

— 30.03.2018 00:12

Переместите $('#value).text(array) внутрь обработчика кликов.

— 30.03.2018 00:12

@JaredSmith Большое спасибо! Я понял, что он загружается только один раз, и мне нужно обновлять его после каждого добавления нового значения. Переместив его в мой обработчик кликов, я добился цели. Большое спасибо! <3

— 30.03.2018 00:18

javascript jquery arrays

30.03.2018 00:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 554

Ответы 2

Вы визуализируете пустой массив один раз, когда документ готов. Добавление дополнительных элементов в массив не перерисовывает DOM с новыми элементами. Вам необходимо обновлять DOM при каждом щелчке мышью, перемещая $('#value').text(array); в обработчик событий щелчка:

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.info(array);
  });
});

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

30.03.2018 00:12

Напоминаем, что поля ввода предоставляют строку, а не целое число.

Взглянуть:

var myArray = [];

$(function() {
  $('#btn').on('click', function() {
    var $input = $('#input').val();
    myArray.push(parseInt($input));
    console.info(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.com/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>

30.03.2018 00:18

Другие вопросы по теме

Добавить много классов в стиль в jquery

Скопируйте стили состояния: hover, чтобы дизайн был таким же, без действительно зависающих элементов

Прокрутите элементы и установите заголовок Gigya share

Рассчитать возраст без отправки

Возьмите и сравните настраиваемый список из div внутри div

Как получить информацию из API с помощью jquery?

Ошибка WebStorm ReferenceError: $ не определено

Формат операторов jQuery отличается от обычного

Как использовать одну и ту же функцию jQuery для нескольких групп списков

JQuery ищет каждое слово отдельно в атрибутах

Помещать значения в пустой массив?

Ответы 2

Другие вопросы по теме

Похожие вопросы