解释

Question

对于javascript来说还很新，我想添加和更新我的列表，但是它不起作用。

我尝试添加以下代码，但没有成功

Product.prototype.addProduct = function() {
    var elol = document.getElementById("lijst");
    var nieuwNaam = document.createElement("li");
    nieuwNaam.textContent= this.naam;
    elol.appendChild(nieuwNaam);
    var nieuwPrijs = document.createElement("li");
    nieuwPrijs.textContent= this.prijs;
    elol.appendChild(nieuwPrijs);
}


Product.prototype.getProducten = function() {
    return this.naam + "(&euro; " + this.prijs +")";
}

这是我希望可以正常工作的文档

<!DOCTYPE html>
<html>

<head>
  <script src="oefwinkel.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      winkel.addProduct("Potlood", 10);
      VulLijst();
      var elBtn = document.getElementById("btn");
      elBtn.onclick = VoegProductToe;
    });

    function VulLijst() {
      var elol = document.getElementById("lijst");
      var producten = winkel.getProducten("</li><li>");
      if (producten.length > 0) {
        elol.innerHTML = "<li>" + producten + "</li>";
      } else {
        elol.innerHTML = "";
      }
    }

    function VoegProductToe() {
      var naam = document.getElementById("txtNaam").value;
      var prijs = document.getElementById("txtPrijs").value;
      winkel.addProduct(naam, prijs);
      VulLijst();
    }

    function Product(naam, prijs) {
      this.naam = naam;
      this.prijs = prijs;
    }
  </script>
</head>

<body>
  <div><label for="txtNaam">Naam:</label>
    <input type="text" id="txtNaam" /></div>
  <div><label for="txtPrijs">Prijs:</label>
    <input type="number" id="txtPrijs" /></div>
  <input type="button" id="btn" value="Toevoegen/Updaten" />
  <ol id="lijst">
  </ol>
</body>

</html>

没有列表输出，我该如何解决？..

我真的找不到解决方案，我想念什么？。

Answer 1

解释

我会公开承认，我不确定100％是否要尝试做，我想这是由于我这一边的语言障碍所致，我不确定您每天使用的自然语言基础，即某些变量名对我来说似乎不清楚，但这是我的问题，不是你的问题！：）

无论如何，我使用了一些猜测工作来弄清楚您要实现的目标，并且我假设您只是在尝试建立某种产品清单，其中每个产品都有名称和价格？

您希望能够基于两个输入字段将产品添加到列表中，然后单击某个按钮来添加/更新该产品列表。

我已将代码分解为几个简单的函数，使用此解决方案，您可以添加/删除尽可能多的函数，类或所需的任何东西。在此答案中，您可以清楚地看到有一些render函数和一些onUpdate函数，为简单起见，我只是使用了这些通用名称。

如果您对此解决方案有任何疑问，请提供尽可能多的反馈！我希望它以某种方式有所帮助。

// A simple product list.
const ProductList = () => {
  const products = [];
  let el = null;

  // What you wish to return, aka an object...
  return {
    addProduct: (name, price) => {
      products.push({
        name: name,
        price: price
      });

      onUpdate();
      render(el, products);
    },

    setRoot: root => {
      el = root;
    },

    // removeFromList, etc... 
  };
};

// A simple on update function.
const onUpdate = () => {
  console.clear();
  console.log('Update!');
};

// A 'simple' render function.
const render = (el, products) => {
  if (el == null) return;

  const template = obj => `<li>${obj.name} &euro;${obj.price}</li>`;
  let html = '';
  products.forEach(product => html += template(product));
  el.innerHTML = html;
};

// A function to dispatch some event(s).
const dispatchEvents = products => {
  const btn = document.getElementById("btn");
  const price = document.getElementById("price");
  const name = document.getElementById("name");

  // Just an example.
  const isValid = () => {
    if (price.value != '' && name.value != '') return true;
    return false;
  };

  // Handle the on click event.
  btn.onclick = () => {
    if (isValid()) {
      products.addProduct(name.value, price.value);
      name.value = '';
      price.value = '';
    }
  };
};

// A simple dom ready function.
const ready = () => {
  const products = ProductList();
  products.setRoot(document.getElementById("productList"));

  products.addProduct('Demo', 10);
  products.addProduct('Other', 19.99);

  dispatchEvents(products);
};

document.addEventListener("DOMContentLoaded", ready);

<div>
  <label for="name">name:</label>
  <input type="text" id="name" />
</div>

<div>
  <label for="price">Prijs:</label>
  <input type="number" id="price" />
</div>

<input type="button" id="btn" value="Update" />

<ol id="productList">
</ol>

Answer 2

您缺少一些东西，

HTML代码。
winkel对象未定义。
VulLijst功能什么也没做……因为addProduct已经在做这件事。
您所依赖的是实例字段（this.naam和this.prijs），但是您想要做的就是传入方法参数（外部变量）。

关于更新，您将需要存储产品列表，清除lijst的子元素，然后重新添加代表该列表的项目。

注意：让我感到困惑的一件事是，为什么要命名为Product的班级（代表一个列表），而实际上却应该是一个Inventory来允许您添加Product对象。

代码

// Uncaught ReferenceError: winkel is not defined
var winkel = new Product();

function Product(naam, prijs) {
  this.naam = naam;
  this.prijs = prijs;
}

Product.prototype.addProduct = function(naam, prijs) {
  naam = naam || this.naam; // Default or instance field
  prijs = prijs || this.prijs; // Default or instance field
  console.log(naam, prijs);
  var elol = document.getElementById("lijst");
  var nieuwNaam = document.createElement("li");
  nieuwNaam.textContent = naam;
  elol.appendChild(nieuwNaam);
  var nieuwPrijs = document.createElement("li");
  nieuwPrijs.textContent = prijs;
  elol.appendChild(nieuwPrijs);
}

Product.prototype.getProducten = function(naam, prijs) {
  naam = naam || this.naam; // Default or instance field
  prijs = prijs || this.prijs; // Default or instance field
  return naam + " (&euro; " + prijs + ")";
}

document.addEventListener("DOMContentLoaded", function() {
  winkel.addProduct("Potlood", 10); // Why are you adding a product to a product?
  var elBtn = document.getElementById("btn");
  elBtn.onclick = VoegProductToe;
});

function VoegProductToe() {
  var naam = document.getElementById("txtNaam").value;
  var prijs = document.getElementById("txtPrijs").value;
  winkel.addProduct(naam, prijs);
}

label { font-weight: bold; }

<label>Product</label>
<input id="txtNaam" value="Something" />
<input id="txtPrijs"value="1.99" />
<button id="btn">Add</button>
<br/>
<ul id="lijst"></ul>

如何添加或更新列表中的产品和价格？

2 个答案:

解释

代码