スプリット私はクリック上の入力の値を取得したい文字

Question

の配列への入力の値は、私はすでに試したどのようなことを、文字の配列に返された値を分割：

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>

なぜこれが機能しないのかわかりません。

Answer 1

addEventListenerコールバックにtextonaut.text = document.getElementById('textonaut-text').value;を入れます。そうすればうまくいくはずです。

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>

あなたは、コールバックの外textonaut.textの値を設定した場合、それは（この値は時にJSファイルのロード設定されている）に関係なく、何が起こるか''として残っていないだろう。

ボタンのclickごとに、addEventListenerのコールバック関数がトリガーされます。つまり、clickごとにtextonaut.textの値がinputのすべての値に設定されます。

詳細については、addEventListenerのドキュメントを参照してください。

Answer 2

あなたは前にクリックしないで後に入力値を取得し、その行に置く必要があります。コールバックの内側に

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

を。

注：あなたのOPで今書かれたようdocument.getElementById('textonaut-text').valueは常に「」空の文字列を返します。 `で

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>