Javascript - 如何使用queryselector获得球员的名字?

Javascript - How to have the name of the players with queryselector?

我创建了一个系统来获取玩家的名字 如何获取名称的 2 个值

我创建了 2 个输入文本,我想用这 2 个值来显示名字的玩家,但我不能:

HTML:

<section id="first_section" class="first_section">
  <input type="text" placeholder="Nom du premier joueur" style="color: blue; font-size: 120px;" size="500" id="firsttext"><br>
  <button type="button" id="first_button">Suiva`enter code here`nt ></button>
</section>

<section id="second_section" class="second_section">
  <input type="text" placeholder="Nom du deuxième joueur" style="color: blue; font-size: 120px;" size="500" id="secondtext"><br>
  <button type="button" id="second_button">Suivant ></button>
</section>

JavaScript:

var firsttext = [document.querySelector("#firsttext").element, document.querySelector("#secondtext").element];


if (!estValide(this))
  {
    afficheur.sendMessage("Case occupée ! <br />Joueur " + firsttext[tour] + " c'est toujours à vous !");

  }
let firstTextEl = document.querySelector("#firsttext"),
    firstValue = firstTextEl.value,
    secondTextEl = document.querySelector("#secondtext"),
    secondValue = secondTextEl.value;

querySelector 获取输入本身,然后您只需使用 .value() 获取该输入元素的值。

更短更简洁的方法是使用一个按钮来检查和检索两个输入值,然后将检索到的值分配给您的 firsttext 数组,如下所示:

/* JavaScript */

var btn = document.querySelector("button");
var firsttext = [];

btn.addEventListener("click", function(){
  var player1 = document.getElementById("firsttext");
  var player2 = document.getElementById("secondtext");
  
  if (player1.value != "" && player2.value != "") {
    firsttext.push(player1.value);
    firsttext.push(player2.value);
    alert(firsttext);
    return firsttext;
  } else {
   alert("Enter players' names");
  }
 
});
<!-- HTML -->

<section id="first_section" class="first_section">
  <input type="text" placeholder="Nom du premier joueur" id="firsttext"><br>
</section>
<p></p>
<section id="second_section" class="second_section">
  <input type="text" placeholder="Nom du deuxième joueur" id="secondtext"><br>

</section>

<section id="button">
    <button type="button" id="second_button">Suivant ></button>
</section>