Я создаю форму для пиццы, которая будет отображать, что заказывает клиент, нажимая кнопки. Моя идея заключается в том, что клиент нажимает на размер товара, который он хочет заказать, и он будет отображаться сбоку.

Проблемы

Я не знаком с 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>
1
Reemor 13 Янв 2017 в 01:49

3 ответа

Лучший ответ

Проблема в том, что вы заменяете все содержимое разделов #items и #price, устанавливая их innerHTML. Вы можете использовать DOM для добавления нового {{ X3}} к <ul> при каждом вызове функции.

Вместо множества переменных, висящих вокруг, в которых хранятся подобные фрагменты данных, вы должны сделать так, чтобы каждая пицца имела свойство 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
}
1
Web_Designer 12 Янв 2017 в 23:09

Попробуйте добавлять новый <li> при каждом нажатии, а не заменять innerHTML всего списка.

Как насчет этого, чтобы начать с:

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);
}
<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>
0
Z-Bone 12 Янв 2017 в 23:03

В основном это происходит потому, что вы использовали знак равенства (=), который заменяет все содержимое переменной .innerHTML.

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

// vs.

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

Также вы можете захотеть использовать фактический HTML-элемент button вместо добавления этого действия в span. Использование не кнопочных элементов для определения действий может привести к путанице или нарушению функциональности некоторых пользователей.

0
Wiktor Bednarz 12 Янв 2017 в 23:04