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

Question

我的代码如下。我希望玩家将他们的名字输入 html 表格，并将此值提交到 javascript 记分卡 class 以便 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:

var aScorecard = new Scorecard();

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

Answer 2

jQuery 解决方案很好，但对于这个场合来说有点过分了。

普通 JavaScript:

你不是很习惯 JavaScript 我猜：

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

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

这段代码做了两件事：

它创建了一个名为 Scorecard 的构造函数。使用此功能，您可以创建 instances（简单地说是副本）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 的主对象。
一个 public 变量被赋值，名为 this.players。 Public 因为可以在函数外调用 Scorecard.
数组也是如此：this.playerList.
添加了publicmethod。注意此功能仅适用于实例，并不与所有实例共享。
方法addPlayer 做了两件事。它以名称作为参数。首先，它使用 ++ 将 public 变量 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 的 Scorecard 的新实例（副本）。
该实例有两个属性：players 和 playerList 以及一个方法：addPlayer.
将 onsubmit 事件 附加到表单。为此，我使用了 document.querySelector。由于您的页面只有一个表单，我们可以 select querySelector 函数遇到的第一个表单。我们使用 addEventListener 来附加事件。单击提交按钮时，函数 formAddPlayer 将触发。请注意，formAddPlayer 作为引用而不是函数调用传递。
实际的 formAddPlayer 函数：参数 e 引用事件。在本例中，提交事件。使用 e.preventDefault() 取消实际提交。我们在表单元素上使用 querySelector（使用 target 检索，即 提交事件 的 form。我们 select 带有 name 的输入元素：name 并使用 value 检索它的值。我们将这个值传递给实例scorecard.

addPlayer

Al一起：

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/

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

How do you pass html input text into a javascript function as a parameter?

javascript

jquery

html

forms

input