Split the value of input to array of characters

Question

I want to get the value of the input on click then split the returned value into an array of characters, that what i've already tried :

window.onload = function() {
  var textonaut = {
    text: '',
    letters: []
  };
  textonaut.text = document.getElementById('textonaut-text').value;
  var go = document.getElementById('go-button');
  go.addEventListener('click', function(e) {
    e.preventDefault();
    textonaut.letters = textonaut.text.split('');
    for(var i = 0; i < textonaut.letters.length; i++) {
      console.log(textonaut.letters[i]);
    };
  });
}

<input id="textonaut-text" type="text"><button id="go-button">go</button>

I can't figure out why this doesn't work.

at `textonaut.text` the textonaut variable is undefined, declare this variable globally — iHasCodeForU, Dec 16 '16 at 15:24
Possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Dec 16 '16 at 15:24
Sorry you're sad and angry. Go read [ask] and how to create a [mcve]. — Idos, Dec 16 '16 at 15:24

Val Berthe · Accepted Answer · 2016-12-16T15:34:47.783

0

Put textonaut.text = document.getElementById('textonaut-text').value; inside your addEventListener callback. Then it should work.

window.onload = function() {
  var textonaut = {
    text: '',
    letters: []
  };

  var go = document.getElementById('go-button');
  go.addEventListener('click', function(e) {
    e.preventDefault();
    textonaut.text = document.getElementById('textonaut-text').value;
    textonaut.letters = textonaut.text.split('');
    for(var i = 0; i < textonaut.letters.length; i++) {
      console.log(textonaut.letters[i]);
    };
  });
}

<input id="textonaut-text" type="text"><button id="go-button">go</button>

If you set the value of textonaut.text outside the callback, it will remain as '' no matter what happens (this value is set when the JS file loads).

The callback function of the addEventListener is triggered at every click on the button. It means that at every click, the value textonaut.text is set at everything's inside your input.

Read addEventListener documentation for more information.

edited Dec 16 '16 at 15:34

answered Dec 16 '16 at 15:28

Val Berthe

1,899
1
18
33

yes, this is the answer. but could you explain why it does not work the other way ?! – Timo Dec 16 '16 at 15:29
okay... Zakaria Acharki gave the answer, thanks to both of you ! – Timo Dec 16 '16 at 15:30
You were setting the `textonaut.text` value only once, when `window.onload` event finished, by moving this asignment inside the `go` click event, you asign `textonaut.text` value to be whatever the input field text is each time `go` is clicked – Aramil Rey Dec 16 '16 at 15:32
@Timo explained – Val Berthe Dec 16 '16 at 15:35

score 0 · Answer 2 · answered Dec 16 '16 at 15:29

You should get the input value after the click not before, so put the line :

textonaut.text = document.getElementById('textonaut-text').value;

Inside the callback.

NOTE : As written now in your OP the document.getElementById('textonaut-text').value will always return an empty string "".

window.onload = function() {
  var textonaut = {
    text: '',
    letters: []
  };

  var go = document.getElementById('go-button');
  go.addEventListener('click', function(e) {
    e.preventDefault();

    textonaut.text = document.getElementById('textonaut-text').value;
    textonaut.letters = textonaut.text.split('');
    for(var i = 0; i < textonaut.letters.length; i++) {
      console.log(textonaut.letters[i]);
    };
  });
}

<input id="textonaut-text" type="text"><button id="go-button">go</button>

Split the value of input to array of characters

2 Answers2