Javascriptのプッシュ入力は、これは1

Question

私は、ユーザーがフィールドに自分の名前（文字列）に入り、時にヒットが入ることを記述しようとしていますhere

を見て、私の質問にフォローアップではない、いくつかの配列を引き起こしそれを配列にプッシュします。それはまあまあです。しかし、私はそれを試してみるとエラーになり、別のものを試してみると複数の配列が生成されます。私はjQueryを使いたくありません。

ここでここでHTML

<input type="text" 
    class="theplayer pre" 
    name="Player" 
    id="bind" 
    placeholder="Enter Names" 
    /> 
<button type="button" id="thego" class="pre enterteam" value="click">Go</button> 

は、次のブロックを参照してください

、nextElementSiblingが呼び出されていないので、私はこれを知っている（動作しますが、それは代わりに1列にすべてをプッシュするの複数のアレイを作成し、私のjsですここで

let namesOfPlayers = []; 
let currentValue = document.getElementById("bind").value; 
let button = currentValue.nextElementSibling; 
document.addEventListener('keypress', function (e) { 
    const key = e.which || e.keyCode; 
    if (key === 13) { 
     namesOfPlayers.push(currentValue); 
     console.log('namesOfPlayers', namesOfPlayers); 
    } 
}); 

は、私は、ユーザーが文字列のSUあるボタンを入力当たるか、クリックしたときにことをしたいエラーをスローし、私のjs（私はjQueryのを使用したくない）

ですbmittedして空の配列に追加します。私は私の人生のために、その仕事をする方法を考え出すことはできません。

ありがとうございました！

Answer 1

入力の値をすぐに取得します。ボタンがクリックされたときにのみ取得します。

第2に、ボタンにはkeypressイベントが関連付けられず、keyCodeイベントも関連付けられていません。 clickイベントを聞く必要があります。

ので、この操作を行います。

let namesOfPlayers = []; 
 
let input = document.getElementById("bind"); 
 
let button = input.nextElementSibling; 
 
button.addEventListener('click', function (e) { 
 
    namesOfPlayers.push(input.value); 
 
    console.log('namesOfPlayers', namesOfPlayers); 
 
});

<input type="text" 
 
     class="theplayer pre" 
 
     name="Player" 
 
     id="bind" 
 
     placeholder="Enter Names" /> 
 
<button type="button" id="thego" class="pre enterteam" value="click">Go</button>

Answer 2

このコードを試してみてください、私はイベント

ますのでもし

（テキスト入力用）（ボタン用）clickを追加し、keypressテキストに焦点を当てるときに[Enter]をクリックします。input入力内のテキストが配列内にあります。

、あなたがボタン

let namesOfPlayers = []; 
 
let currentElement = document.getElementById("bind"); 
 
let button = currentElement.nextElementSibling; 
 
let addPlayer =() => { 
 
    namesOfPlayers.push(currentElement.value); 
 
    console.log(namesOfPlayers); // Just for testing 
 
} 
 
currentElement.addEventListener('keypress', function (e) { 
 
    if (e.which === 13 || e.keyCode === 13) { 
 
     addPlayer(); 
 
    } 
 
}); 
 

 
button.addEventListener('click', addPlayer);

<input type="text" 
 
       class="theplayer pre" 
 
       name="Player" 
 
       id="bind" 
 
       placeholder="Enter Names" 
 
       /> 
 
      <button type="button" id="thego" class="pre enterteam" value="click">Go</button>

Answer 3

はCurrentValueは、イベントリスナーの外で定義されているので、それは一度だけ呼び出され、初期の「戻る」をクリックすると、同じことが起こります。そのため、プッシュコールは空の文字列のみを挿入します。また、ボタンにはリスナーがないため何もしません。あなたは、パフォーマンスを改善するためのフォームを持つ方がいいでしょう、

let namesOfPlayers = []; 
// It's better to get the button by id instead of getting it by a previous child. 
// This is because it might cause some unexpected behaviour if someone changed the HTML. 
const button = document.getElementById("thego"); 

button.addEventListener('click', function (e) { 
    addItemToArray(namesOfPlayers); 
}); 

document.addEventListener('keypress', function (e) { 
    const key = e.which || e.keyCode; 
    if (key === 13) { 
    addItemToArray(namesOfPlayers); 
    } 
}); 

function addItemToArray(namesOfPlayers) { 
    const currentValue = document.getElementById("bind").value; 
    namesOfPlayers.push(currentValue); 
    console.log('namesOfPlayers', namesOfPlayers); 
} 

https://fiddle.jshell.net/4k4a9m6y/

しかし：

はここで更新されたコードです。このコードの実行を行います

let namesOfPlayers = []; 
 
const form = document.getElementById("form"); 
 

 
form.addEventListener('submit', function (e) { 
 
    const currentValue = document.getElementById("bind").value; 
 
    namesOfPlayers.push(currentValue); 
 
    console.log('namesOfPlayers', namesOfPlayers); 
 
});

<form id="form" 
 
     action="javascript:void(0);"> 
 
    <input type="text" 
 
     class="theplayer pre" 
 
     name="Player" 
 
     id="bind" 
 
     placeholder="Enter Names" 
 
     /> 
 
    <button type="submit" id="thego" class="pre enterteam" value="click">Go</button> 
 
</form>

https://fiddle.jshell.net/4k4a9m6y/2/