Как записать слова в массив?

Question

[Максим]

Я хочу введённые слова в input[type="text"] записать в массив и вывести в тег параграфа но когда ввожу в input любое слово и нажимаю на кнопку сохраняется вот это [""].

Где я допускаю ошибку ? https://codepen.io/topicstarter/pen/zQYZJO

Answer 1

[Роман]

Так сгодится?

Comments

[Максим]

скажи, а если слова разделять пробелом то как их записывать по отдельности в массив?

[Роман]

Максим Ленский,

[Максим]

Роман, круто ...а пояснить сможешь ? сможешь рассказать что бы я понял ?

[Роман]

Максим Ленский, держи:

// тут и так все понятно )))
var bt = document.getElementById('btn').onclick = method;
var pr = document.getElementById('paragraph');
var inp = document.getElementById('input');

// создаем массив накопитель, в который будем складывать значения
var arr = [];


function method (){
  // получаем текст введенный в инпуте. если это сделать так как было у вас
  // (вне обработчика) то в переменной будет пустота (значение, которое 
  // было в инпуте на момент обращения к inp.value
  const text = inp.value;
  
  // тут мы просто разбиваем строку на слова. разделителем 
  // является \s+ - любой  пробельный символ (пробел, табуляция, 
  // возврат каретки, переход на новую строку)
  // повторяющийся 1 или более раз. на выходе будет массив слов
  const list = text.split(/\s+/);

  // вставляем полученный массив слов в массив накопитель
  // тут есть хитрость, троеточие превратит массив list в список 
  // параметров. Тоесть аналогичен записи, как если бы мы 
  // указали arr.push(list[0], list[1], и т.д. до конца массива);
  arr.push(...list);
  
  // объединяем массив накопитель в строку, 
  // разделителями элементов будет ", "
  const result = arr.join(", ");

  // вставляем строку с результатом в параграф
  pr.innerText = result;

  // обнуляем текст в инпуте
  inp.value = "";

}

[Роман]

Максим Ленский,

что такое ... три точки ?

это ES6 оператор Spread

и обязательно ли его наличие ?

Если вам не надо сохранять в массиве результаты предыдущего ввода, то вам вполне подходит вариант от olya_097.

Если же предыдущие значения сохранять надо, добавляя к ним вновь введенные слова но вы не хотите пользоваться оператором Spread, то вы можете заменить это:
arr.push(...list);

на это:

list.forEach(word=>{
     arr.push(word);
   });

или на это:
arr.concat(list);

Answer 2

[olya_097]

https://codepen.io/anon/pen/MdWpMM
может мое решение будет более понятно

Comments

[Максим]

вот и ты мне пригодилась ...а я учу только js
с графикой давно уже разобрался

[olya_097]

Максим Ленский, рада помочь)
под графикой подразумеваешь канвас?

[Максим]

olya_097, SVG канвас это тоже знания js прежде всего