Question

（初学者）我正在为一个课程项目的表单工作，每次填写此表单时都会创建一个新对象。我创建了一个检查的对象原型。我在控制台中测试使用：

var nick = new diner('Nick', 'Chicken', 5, 'Rice', 3);

...全部检出并创建一个新对象。

但是如何在每次提交表单时创建一个全新的对象？

<script>

  //this works in the console when I call it to create a new object. Ex., var nick = new diner('nick', 'chicken', 5, 'rice', 3);

  function diner(name, mealOne, mealOnePrice, mealTwo, mealTwoPrice) {
    this.name = name;
    this.mealOne = mealOne;
    this.mealOnePrice = mealOnePrice;
    this.mealTwo = mealTwo;
    this.mealTwoPrice = mealTwoPrice;
    this.total = function() {
        return this.mealOnePrice + this.mealTwoPrice;
    };
    this.tax = function() {
        return this.total() * .1;
    };
}

</script>

<body>

  <h1>Meal Calculator</h1>
  <label>Enter Diner Name:<input type='text' id='name'></label>
  <br>
  <label>What are they eating?<input type='text' id='mealOne'></label>
  <br>
  <label>How much is it?<input type='text' id='mealOnePrice'></label>
  <br>
  <label>What else are they eating?<input type='text' id='mealTwo'></label>
  <br>
  <label>How much is that?<input type='text' id='mealTwoPrice'></label>
  <br>

  //I think it's this diner() function that's not quite right

  <button type="button" onclick="diner()">Build Diner Object</button>

</body>

最终，我想调用新对象并查看：

nick;
diner {name: "nick", mealOne: "chicken", mealOnePrice: 5, mealTwo: "rice", mealTwoPrice: 3}

更新**我现在离得更近了，但我还是得到了这个未被捕获的引用错误：

<script>

  function diner(name, mealOne, mealOnePrice, mealTwo, mealTwoPrice) {
    this.name = name;
    this.mealOne = mealOne;
    this.mealOnePrice = mealOnePrice;
    this.mealTwo = mealTwo;
    this.mealTwoPrice = mealTwoPrice;
    this.total = function() {
        return this.mealOnePrice + this.mealTwoPrice;
    };
    this.tax = function() {
        return this.total() * .1;
    };
  }

  var name;
  var mealOne;
  var mealOnePrice;
  var mealTwo;
  var mealTwoPrice;

  function buildObj() {
    name = document.getElementById('name').value;
    mealOne = document.getElementById('mealOne').value;
    mealOnePrice = document.getElementById('mealOnePrice').value;
    mealTwo = document.getElementById('mealTwo').value;
    mealTwoPrice = document.getElementById('mealTwoPrice').value;
    name = new diner(name, mealOne, mealOnePrice, mealTwo, mealTwoPrice);
  }

</script>

<body>

  <form id="id" action="action">
    <h1>Meal Calculator</h1>
    <label>Enter Diner Name:<input type='text' id='name'></label>
    <br>
    <label>What are they eating?<input type='text' id='mealOne'></label>
    <br>
    <label>How much is it?<input type='text' id='mealOnePrice'></label>
    <br>
    <label>What else are they eating?<input type='text' id='mealTwo'></label>
    <br>
    <label>How much is that?<input type='text' id='mealTwoPrice'></label>
    <br>
    <button type="button" onclick="buildObj()">Build Diner Object</button>
  </form>

</body>

Answer 1

您的问题是HTML中的onclick处理程序：

<button type="button" onclick="diner()">Build Diner Object</button>

我建议你添加一个处理click事件的中间函数并创建一个新的diner对象：

HTML：

<button type="button" onclick="onclick()">Build Diner Object</button>

使用Javascript：

function onclick() {
    // create the new object
    var nick = new diner('nick', 'chicken', 5, 'rice', 3);

   // ... do what you want with it
}

我还建议在您的字段周围添加form元素：

<body>
  <form id="id" action="action">
    <h1>Meal Calculator</h1>
    <label>Enter Diner Name:<input type='text' id='name'></label>
    <br>
    <label>What are they eating?<input type='text' id='mealOne'></label>
    <br>
    <label>How much is it?<input type='text' id='mealOnePrice'></label>
    <br>
    <label>What else are they eating?<input type='text' id='mealTwo'></label>
    <br>
    <label>How much is that?<input type='text' id='mealTwoPrice'></label>
    <br>
    <button type="button" onclick="onclick()">Build Diner Object</button>
  </form>
</body>

Answer 2

似乎你缺少遍历DOM元素的部分，收集它们的值以传递给diner（）。虽然这个可以使用vanilla JS完成，但开发人员倾向于使用实用程序库（如jquery）是有充分理由的。

你需要这样的东西：

function submit(){
    diner(
        document.getElementById('name').value,
        document.getElementById('mealOne').value,
        document.getElementById('mealOnePrice').value,
        document.getElementById('mealTwo').value,
        document.getElementById('mealTwoPrice').value
    );
}

然后，您可以从提交按钮调用功能：

<button type="button" onclick="submit()">Build Diner Object</button>

Answer 3

在按钮的事件处理程序中，您正在调用diner()（将其称为常规函数），但应该调用new diner(...)（作为构造函数）从表单中检索值。见http://js-bits.blogspot.com/2010/08/constructors-without-using-new.html

更加分离的方法是通过JavaScript而不是通过html属性设置处理程序。

document.querySelectorAll('button').addEventListener('click', function() {
    var name = document.getElementById('name').value;
    // same pattern for all parameters
    var dinerX = new diner(name, ...)

}）;

使用表单中的对象原型在Vanilla Javascript中创建多个用户

3 个答案: