的Javascript推輸入數組會導致多個陣列不是一個

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> 

這裏是我的js的作品，但它會創建多個陣列，而不是推的一切到一個數組（因爲nextElementSibling不叫，我知道這一點，看看下一個塊

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); 
    } 
}); 

這裏是我的js拋出一個錯誤（我不想使用jQuery）

我想，當用戶點擊輸入或點擊按鈕，該字符串是蘇bmitted並添加到空數組中。我不能爲我的生活找出如何做到這一點。

感謝您的幫助！

Answer 1

您很快獲取輸入值。只有當按鈕被點擊時，你才應該獲取它，而不是之前。

其次，按鈕沒有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（文本輸入）事件

所以如果你點擊輸入時，你將注意力集中在文字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/