如何将 html 输入文本作为参数传递给 javascript 函数？

Question

我的代码如下。我希望玩家将他们的名字输入到 html 表单中，并将这个值提交到 javascript 记分卡类中，以便 this.players = "name"。我将如何最好地做到这一点？我一直在尝试使用 jquery，但没有成功。

HTML：

<section class="name1-2-12">
  <form class='name' action=''>
    <input type="text" name="name" placeholder="NAME">
    <input type='submit' name='submit'>
  </form>
</section>

JAVASCRIPT：

var Scorecard = function() {
    this.players = 0;
};

Scorecard.prototype.addPlayer = function(name) {
  this.players = name
};

Answer 1

jQuery 解决方案很不错，但在这个场合有点过头了。

纯 JavaScript：

我猜你还不太习惯 JavaScript：

var Scorecard = function() {
    this.players = 0;
};

Scorecard.prototype.addPlayer = function(name) {
   this.players = name
};

这段代码做了两件事：

1. 它创建了一个名为Scorecard 的构造函数。使用此功能，您可以创建Scorecard 的instances（简单地复制）。
2. 您可以使用原型向Scorecard 主对象添加一个函数。通过prototype 添加的所有内容将由Scorecard 的所有实例共享

总结一下。这不是实现您想要的功能的方法。考虑一下：

var Scorecard = function() {
    this.players = 0;
    this.playerList = [];  //create a new Array() using shorthand [];
    this.addPlayer = function(name)
    {
        this.players++; //add one to the player count.
        this.playerList.push(name); //add a player to the playerlist using array.push().
    }
};

这段代码在做什么：

1. 它会创建一个名为 Scorecard 的主对象。
2. 分配了一个名为this.players 的公共变量。公开，因为它可以在函数 Scorecard 之外调用。
3. 对数组也是如此：this.playerList。
4. 添加了公共method。请注意，此功能仅适用于实例，并不与所有实例共享。
5. addPlayer 方法做了两件事。它将名称作为参数。首先，它使用++ 将公共变量this.players 加一，即加一。其次，它使用push 方法将播放器添加到数组列表中。它将一个项目附加到一个数组中。

现在我们需要创建一个提交事件。当用户提交表单时，会在记分卡中添加一名玩家。

var scorecard = new Scorecard(); //first create an instance of Scorecard
document.querySelector("form").addEventListener("submit", formAddPlayer, false);

function formAddPlayer(e)
{
   e.preventDefault(); //e is the submit event. preventDefault stops it from actually posting the form, causing the page to reload.
   var name = e.target.querySelector("input[name='name']").value //get the value from the input element.
   scorecard.addPlayer(name);

   //show the results
   alert("Player amount: " + scorecard.players + "\nPlayers: \n -" + scorecard.playerList.join("\n -") ); //show the results
}

代码在做什么：

1. 它会创建一个名为scorecard 的Scorecard 的新实例（副本）。
2. 该实例有两个属性：players 和 playerList 和一个方法：addPlayer。
3. 将onsubmit 事件附加到表单。我为此使用了document.querySelector。由于您的页面只有一个表单，我们可以选择querySelector 函数遇到的第一个表单。我们使用addEventListener 附加事件。单击提交按钮时，函数formAddPlayer 将触发。请注意，formAddPlayer 是作为引用而不是作为函数调用传递的。
4. 实际的formAddPlayer函数：参数e指的是事件。在这种情况下，提交事件。使用e.preventDefault() 取消实际提交。我们在表单元素上使用querySelector（使用target 检索，即提交事件 的form）。我们使用name 选择输入元素：name 并使用value 检索它的值。我们将此值传递给实例scorecard 的方法addPlayer。

大家一起：

function Scorecard() {
  this.players = 0;
  this.playerList = []; //create a new Array() using shorthand [];
  this.addPlayer = function(name) {
    this.players++; //add one to the player count.
    this.playerList.push(name); //add a player to the playerlist using array.push().
  }
};

var scorecard = new Scorecard(); //first create an instance of Scorecard

function formAddPlayer(e) {
  e.preventDefault(); //e is the submit event. preventDefault stops it from actually posting the form, causing the page to reload.
  var name = e.target.querySelector("input[name='name']").value //get the value from the input element.
  scorecard.addPlayer(name);

  //show the results
  alert("Player amount: " + scorecard.players + "\nPlayers: \n -" + scorecard.playerList.join("\n -")); //show the results
}
document.querySelector("form").addEventListener("submit", formAddPlayer, false);

<section class="name1-2-12">
  <form class='name' >
    <input type="text" name="name" placeholder="NAME">
    <input type='submit' name='submit'>
  </form>
</section>

http://jsfiddle.net/55u2b81j/

Answer 2

使用 jQuery：

var aScorecard = new Scorecard();

$('form.name').on('submit',function(e){
    e.preventDefault();
    var name = $(this).children('input[name="name"]').val();
    aScorecard.addPlayer(name);
});