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

Using Object Prototype in a Form to Create Multiple Users in Vanilla Javascript

本文关键字：创建 原型 对象 用户 窗体 Javascript Vanilla      更新时间：2023-09-26

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

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>

您的问题是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>

您似乎缺少了遍历DOM元素的部分，收集它们的值以传递给diner（）。虽然这可以用vanillaJS来完成，但开发人员倾向于使用实用程序库（如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>

在按钮的事件处理程序中，您正在调用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, ...)

})；

相关文章：