How to write words in an array?

I want the words you typed in input[type="text"] record into an array and display in a paragraph tag but when I enter to input any word and press the button is saved here is [""].

Where I make a mistake ? https://codepen.io/topicstarter/pen/zQYZJO
March 20th 20 at 11:52
2 answers
March 20th 20 at 11:54
Solution
Is that okay?
@augustus_Doyle26,
- Martine.Adams65 commented on March 20th 20 at 12:00
@Ignatius.Breitenber, cool ...and able to explain ? will be able to tell that I will understand ? - Michaela_OKon commented on March 20th 20 at 12:03
tell me, if the words be separated by a space how to record them separately in an array? - Michaela_OKon commented on March 20th 20 at 11:57
@augustus_Doyle26, here:
// here everything is clear )))
var bt = document.getElementById('btn').onclick = method;
var pr = document.getElementById('paragraph');
var inp = document.getElementById('input');

// create an array drive, in which we put value
var arr = [];


function method (){
 // get the text entered in the input. if you do so as you have
 // (outside handler) then the variable will be void (the value that 
 // was input at the time of application to inp.value
 const text = inp.value;

 // here we're just splitting a string into words. separator 
 // is \s+ - any whitespace character (space, tab, 
 // carriage return, a newline)
 // repeated 1 or more times. the output will be an array of words
 const list = text.split(/\s+/);

 // insert the array of words into the array drive
 // here's the trick, the ellipses will turn the array list into a list 
 // parameters. Ie the same record as if we 
 // indicated arr.push(list[0] list[1], etc to the end of the array);
arr.push(...list);

 // combine an array of drive in the line 
 // delimiters of elements is ", "
 const result = arr.join(", ");

 // insert the string with the result in paragraph
 pr.innerText = result;

 // reset the text input
 inp.value = "";

}
- Martine.Adams65 commented on March 20th 20 at 12:06
@augustus_Doyle26,
what is ... three points ?

this operator ES6 Spread

and be sure whether its availability ?

If you don't need to store in array the results of the previous input, then you are quite suitable variant from @Zelma_Daugherty.

If the previous value is necessary to maintain, adding the newly introduced words but you don't want to use the Spread operator, you can replace this:
arr.push(...list);

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


or this:
arr.concat(list); - Martine.Adams65 commented on March 20th 20 at 12:09
March 20th 20 at 11:56
Solution
https://codepen.io/anon/pen/MdWpMM
maybe my decision will be more clear
so you was useful to me ...and I teach only js
with the graphics it has long been understood - Michaela_OKon commented on March 20th 20 at 11:59
@augustus_Doyle26, happy to help)
under graphics mean the canvas? - Giles_Luettgen18 commented on March 20th 20 at 12:02
@Zelma_Daugherty, SVG, canvas it is also knowledge of js primarily - Michaela_OKon commented on March 20th 20 at 12:05

Find more questions by tags JavaScript