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

这段代码做了两件事：

它创建一个名为Scorecard的构造函数。使用此功能，您可以创建instances。{/ li>的Scorecard（简单放置副本）
使用原型向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().
    }
};

这段代码在做什么：

它创建一个名为Scorecard的主对象。
分配了一个名为this.players的公共变量。公开，因为它可以在函数Scorecard之外调用。
对阵列进行同样的操作：this.playerList。
添加了公开method。请注意，此功能仅适用于实例，不会与所有实例共享。
方法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
}

代码在做什么：

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

Al在一起：

scorecard

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

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

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

2 个答案: