Javascript - добавить сумму всех затрат, связанных с ключом объекта - PullRequest
Новая
       43

Javascript - добавить сумму всех затрат, связанных с ключом объекта

1 голос
/ 31 января 2020

Поэтому я пытаюсь подсчитать количество товаров, которые пользователь добавляет в свою корзину, а также распечатать общую стоимость всех выбранных товаров. Подсчет количества элементов работает должным образом, но я изо всех сил пытаюсь выяснить, как получить доступ к удельной стоимости c, связанной с каждым элементом, который пользователь выбирает для выбора, и взять сумму всех этих элементов вместе, представляя переменную * 1001. *.

Например, если пользователь нажимает Добавить рядом с iMa c, а также Добавить рядом с Windows P C, общая сумма стоимость должна быть 2000 + 1300 = 3300. В функции calculate() я попытался перебрать все элементы в отделе электроники и проверить, нажал ли пользователь кнопку рядом с определенным элементом, но это испортило мою программу, поэтому Я закомментировал функцию. Подобно переменной count, я пытаюсь успешно обновлять общую стоимость каждый раз, когда пользователь решает добавить что-то в свою корзину. Любое руководство будет оценено. 

let count = 0;
let totalCost = 0;

function init() {
  count = 0;
  let button = document.getElementById("but");
  button.onclick = buttonClicked;
}

function buttonClicked() {
  count++;
  let div = document.getElementById("coutner");
  div.innerHTML = "You have " + count + " items and a total cost of $" + totalCost;
}

function showOptions(el) {
  let userPicked = el.value;
  var div = document.getElementById("div");
  if (userPicked != 'none') {
    var newContent = (electronics.store);
    newContent += '<div>';
    Object.keys(electronics.inventory).forEach(key => {
      newContent += key;
      newContent += '<div>';
      var items = Object.values(electronics.inventory[key]);
      items.forEach(item => {
        newContent += '<div>';
        newContent += `&nbsp; <span class="brand"> ${item.brand} </span>  <span class="price">$${item.cost}</span>`;
        newContent += `<input type=button value="Add" onclick="add(this)"/>`
        newContent += '</div>';
      });
      newContent += '</div>';
    });
    newContent += '</div>';
    div.innerHTML = newContent;
  }
}

function add(add) {
  console.clear();
  console.log(add.closest('div').textContent.trim());
  buttonClicked();
}


let electronics = {
  store: "Mike's Computers",
  inventory: {
    "Laptops": {
      0: {
        brand: "iMac",
        cost: 2000
      },
      1: {
        brand: "Dell",
        cost: 600
      }
    },
    "Computers": {
      2: {
        brand: "Windows PC",
        cost: 1300
      }
    }
  }
};
<div>
  <h1>Welcome</h1>
</div><br />
<div class="dropdown">
  <form>
    <select name="list" id="list" accesskey="target" onchange="showOptions(this); buttonClicked(this)">
      <option value="none">Select a restaurant</option>
      <option value="Electronics">Electronics</option>
    </select>
    <input type=button id="but" value="Select" onclick="showOptions(); buttonClicked()" />
    <div><mark id="coutner"></mark></div>
  </form>

</div>
<div id="div"></div>

Я постоянно получал ошибку форматирования при попытке показать мой комментарий, поэтому здесь он находится отдельно (это было в файле js ниже init()) 

/*
function calculate(){
    if(userPicked == 'Electronics'){
        Object.keys(electronics.menu).forEach(key => {
             var items = Object.values(electronics.menu[key]);
               items.forEach(item => {
                  if(buttonClicked(){
                      totalCost += item.cost;
                  }
             });
        }); 
    }
}
*/

1 Ответ

2 голосов
/ 31 января 2020

Вы можете исправить свой код, передав стоимость товара в функцию add().

Также я переименовал вашу функцию buttonClicked в то, что она фактически делает - обновляя отображение.

Всегда старайтесь поддерживать ваши функции в чистоте и делать так, чтобы они выполняли только одно. Перемещая count++ из функции обновления в место, где она фактически принадлежит - функция add - вы разделяете функциональность, а также исправляете ошибку на дисплее. 

let count = 0;
let totalCost = 0;
let div = document.getElementById("coutner");

function init() {
  count = 0;
  let button = document.getElementById("but");
  button.onclick = updateDisplay;
}

function updateDisplay() {
  div.innerHTML = `You have ${count} items and a total cost of $${totalCost}`;
}

function showOptions(el) {
  let userPicked = el.value;
  var div = document.getElementById("div");
  if (userPicked != 'none') {
    var newContent = (electronics.store);
    newContent += '<div>';
    Object.keys(electronics.inventory).forEach(key => {
      newContent += key;
      newContent += '<div>';
      var items = Object.values(electronics.inventory[key]);
      items.forEach(item => {
        newContent += `
<div>&nbsp;
  <span class="brand"> ${item.brand}</span>
  <span class="price">$${item.cost}</span>
  <input type=button value="Add" onclick="add(this,${item.cost})"/>
</div>`;
      });
      newContent += '</div>';
    });
    newContent += '</div>';
    div.innerHTML = newContent;
  }
}

function add(element,cost) {
  console.clear();
  totalCost += parseInt(cost);
  count++;
  console.log(element.closest('div').textContent.trim());
  updateDisplay();
}


let electronics = {
  store: "Mike's Computers",
  inventory: {
    "Laptops": {
      0: {
        brand: "iMac",
        cost: 2000
      },
      1: {
        brand: "Dell",
        cost: 600
      }
    },
    "Computers": {
      2: {
        brand: "Windows PC",
        cost: 1300
      }
    }
  }
};
<div>
  <h1>Welcome</h1>
</div><br />
<div class="dropdown">
  <form>
    <select name="list" id="list" accesskey="target" onchange="showOptions(this); updateDisplay(this)">
      <option value="none">Select a restaurant</option>
      <option value="Electronics">Electronics</option>
    </select>
    <input type=button id="but" value="Select" onclick="showOptions(); updateDisplay()" />
    <div><mark id="coutner"></mark></div>
  </form>

</div>
<div id="div"></div>
...