Javascript - 如何使用查询选择器获取玩家的姓名？答案

【问题标题】：Javascript - How to have the name of the players with queryselector?Javascript - 如何使用查询选择器获取玩家的姓名？
【发布时间】：2019-01-19 20:12:33
【问题描述】：

我创建了一个系统来记录玩家的姓名如何获取名称的 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 !");

  }

【问题讨论】：

标签： javascript html tic-tac-toe

【解决方案1】：

执行此操作的更短更简洁的方法是使用单个按钮来检查和检索两个输入值，然后将检索到的值分配给您的 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>

【讨论】：

@Spyynox 你第二次遇到什么错误？我去看看。

【解决方案2】：

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

querySelector 自己获取输入，然后您只需使用 .value() 即可获取该输入元素的值。

【讨论】：

他得分未定义... let firstTextEl = document.querySelector("#firsttext"), firstValue = firstTextEl.value, secondTextEl = document.querySelector("#secondtext"), secondValue = secondTextEl.value ; afficheur.sendMessage("Le jeu peut 开始！
" + firstValuetour + " c'est votre tour.");