问题

我碰巧是JavaScript的新手，但我不明白为什么当我点击按钮时他们只添加其中一个项目，当我点击另一个时他们互相替换。我想改变它，以便可以无限点击它们。另外，我想知道我的代码是否有更高效的版本。

<table>
      <tr id="top_border">
        <th>Pizzas</th><th>Small</th><th>Medium</th><th>Large</th>
      </tr>
      <tr>
        <td>Pepperoni</td><td><span onclick="ADDpps()">4.99</span></td><td>5.15</td><td>6.70</td>
     </tr>
     <tr>
        <td>Meat Lovers</td><td><span onclick="ADDmlps()">4.99</span></td><td>5.15</td><td>6.70</td>
     </tr>
     <tr>
        <td>Hawaiian</td><td><span onclick="ADDhps()">4.99</span></td>     <td>5.15</td><td>6.70</td>
     </tr>
</table>

输出

<ul id="items">
</ul>
<ul id="price">
</ul>

Javascript我试图使用

<script type="text/javascript">
var mlps= ["S - Meat lovers pizza","$4.99"];
function ADDmlps(){
    document.getElementById("items").innerHTML = mlps[0];
    document.getElementById("price").innerHTML = mlps[1];
}
var hps = ["S - Hawaiian Pizza","$4.99"];
function ADDhps(){
    document.getElementById("items").innerHTML = hps[0];
    document.getElementById("price").innerHTML = hps[1];
}
var pps = ["S - Pepperoni Pizza","$4.99"];
function ADDpps(){
    document.getElementById("items").innerHTML = pps[0];
    document.getElementById("price").innerHTML = pps[1];
}
</script>

Answer 1

问题是您通过设置#items来替换#price和innerHTML div的所有内容。您希望在每个函数调用中使用DOM向<ul>添加new <li>。

您应该使每个披萨在对象中具有price和name属性，而不是存储大量变量来存储类似的数据。然后每个对象可以是数组中的项目：

var pizzas = [
  {
    name: "S - Meat lovers pizza",
    price: "$4.99"
  }
  // ...
];

您还希望将功能非常相似的功能压缩为1：

// call passing the index of the pizza in the pizzas array
function addPizza(index) {
  var pizza = pizzas[index];
  var name = pizza.name;
  var price = pizza.price;
  // now add an <li> to each <ul> with this info
}

Answer 2

尝试在每次点击时添加新的<li>，而不是替换整个列表的innerHTML。

如何开始这样的事情：

＆＃13;

var mlps= ["S - Meat lovers pizza","$4.99"];
function ADDmlps(){
  createItem(mlps[0], mlps[1]);
}
var hps = ["S - Hawaiian Pizza","$4.99"];
function ADDhps(){
  createItem(hps[0], hps[1]);
}
var pps = ["S - Pepperoni Pizza","$4.99"];
function ADDpps(){
  createItem(pps[0], pps[1]);
}

function createItem(item, price) {
  var itemLi = document.createElement('li');
  itemLi.class = "item";
  itemLi.innerHTML = item + " : " + price;
  
  document.getElementById("items").appendChild(itemLi);
}

＆＃13;

<table>
     <tr id="top_border">
      <th>Pizzas</th><th>Small</th><th>Medium</th><th>Large</th>
      </tr>
      <tr>
        <td>Pepperoni</td><td><span onclick="ADDpps()">4.99</span></td><td>5.15</td><td>6.70</td>
     </tr>
     <tr>
        <td>Meat Lovers</td><td><span onclick="ADDmlps()">4.99</span></td><td>5.15</td><td>6.70</td>
     </tr>
     <tr>
        <td>Hawaiian</td><td><span onclick="ADDhps()">4.99</span></td>     <td>5.15</td><td>6.70</td>
     </tr>
</table>

<ul id="items">
</ul>

＆＃13;

Answer 3

基本上会发生这种情况，因为您使用了等号（=）来替换变量.innerHTML的整个内容。

var a = "test";
a = "2"; // 2
a = "3"; // 3

// vs.

var b = "test";
b += "2"; // test2
b += "3"; // test23

此外，您可能希望使用实际的button HTML元素，而不是将此操作添加到span。使用非按钮元素来定义动作可能会使某些用户感到困惑或破坏。

添加到列表而不是单击替换内容

问题

3 个答案: