#javascript
#javascript
Вопрос:
Я пытаюсь создать простое приложение для составления списка покупок, в котором перечислены товары, которые вы хотите купить, количество, которое вы хотите купить, и ожидаемая цена, которую вы заплатите за каждый (пока она вводится вручную). Затем он организует все ваши записи в таблице.
Проблема, с которой я сталкиваюсь, заключается в том, что дублирующийся элемент собирается быть добавлен. Я бы хотел, чтобы вместо этого дублирующийся элемент в списке был объединен в существующий элемент с обновленным количеством.
Итак, если отправлено «Зерновые, 10, 4,99», а «Зерновые, 15, 5,99» уже существует, то вместо создания новой записи существующая запись обновляется, чтобы быть
«Хлопья, 25, 5,99» (я выясню, как усреднить цены позже.)
Это была моя лучшая попытка, но она не сработала:
for (var i=0; i<itemArray.length; i ) {
if (itemArray[i] === newItemEntry) {
quantityArray[i] = quantityArray[i] newQuantityEntry;
} else {
itemArray.push(newItemEntry);
quantityArray.push(newQuantityEntry);
expectedPriceForEachArray.push(newExpectedPriceForEachEntry);
}
};
Мой рабочий HTML:
<!DOCTYPE html>
<html lang="en">
<script src="script.js"></script>
<body>
<h1>
Enter an item, quantity, and the price you're expecting to pay.
</h1>
Item:<br>
<br>
<input type="text" placeholder="ketchup" id="itemForm">
<br>
<br> Quantity:
<br>
<br>
<input type="number" placeholder="25" id="quantityForm">
<br>
<br> Expected Price for Each:<br>
<br>
<input type="number" placeholder="2.99" id="expectedPriceForEachForm">
<br>
<br>
<button onclick="addToListOfEntries()">Add this entry to the list</button>
<br>
<br>
<table id="myEntries" border='1' width='400'>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Expected Price For Each</th>
</tr>
</table>
</body>
</html>
Мой рабочий Javascript:
var itemArray = []
var quantityArray = []
var expectedPriceForEachArray = []
function addToListOfEntries () {
var table = document.getElementById("myEntries");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var newItemEntry = document.getElementById("itemForm").value
var newQuantityEntry = document.getElementById("quantityForm").value
var newExpectedPriceforEachEntry = document.getElementById("expectedPriceForEachForm").value
itemArray.push(newItemEntry);
quantityArray.push(newQuantityEntry);
expectedPriceForEachArray.push(newExpectedPriceforEachEntry);
for(var i=0; i<itemArray.length;i )
{
cell1.innerHTML = itemArray[i];
cell2.setAttribute('style', 'text-align: right;');
cell2.innerHTML = quantityArray[i];
cell3.setAttribute('style', 'text-align: right;');
cell3.innerHTML = expectedPriceForEachArray[i] " USD";
}
}
var itemArray = []
var quantityArray = []
var expectedPriceForEachArray = []
function addToListOfEntries () {
var table = document.getElementById("myEntries");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var newItemEntry = document.getElementById("itemForm").value
var newQuantityEntry = document.getElementById("quantityForm").value
var newExpectedPriceforEachEntry = document.getElementById("expectedPriceForEachForm").value
itemArray.push(newItemEntry);
quantityArray.push(newQuantityEntry);
expectedPriceForEachArray.push(newExpectedPriceforEachEntry);
for(var i=0; i<itemArray.length;i )
{
cell1.innerHTML = itemArray[i];
cell2.setAttribute('style', 'text-align: right;');
cell2.innerHTML = quantityArray[i];
cell3.setAttribute('style', 'text-align: right;');
cell3.innerHTML = expectedPriceForEachArray[i] " USD";
}
} <!DOCTYPE html>
<html lang="en">
<script src="script.js"></script>
<body>
<h1>
Enter an item, quantity, and the price you're expecting to pay.
</h1>
Item:<br>
<br>
<input type="text" placeholder="ketchup" id="itemForm">
<br>
<br> Quantity:
<br>
<br>
<input type="number" placeholder="25" id="quantityForm">
<br>
<br> Expected Price for Each:<br>
<br>
<input type="number" placeholder="2.99" id="expectedPriceForEachForm">
<br>
<br>
<button onclick="addToListOfEntries()">Add this entry to the list</button>
<br>
<br>
<table id="myEntries" border='1' width='400'>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Expected Price For Each</th>
</tr>
</table>
</body>
</html> Комментарии:
1. Используйте JavaScript
includesиindexOfметоды, чтобы проверить, существует ли элемент уже и с каким индексом добавлять суммы.2. Я бы предпочел использовать только один массив, представляющий «корзину», в которую вы будете размещать новые товары.
var cart = [{ item: 'Cereal', unitPrice: 5.9, quantity: 15}]затем вы можете использовать функцию поиска для поиска существующих товаров. Если там нетpushновой записи, просто обновите свойство количества (вы можете использовать карту ).
Ответ №1:
Используйте объекты Javascript для записи ваших записей, а не три разных массива:
// a sample item:
var item = {
name: "something",
quantity: 5,
price: 4.99
};
// a sample cart:
var cartItems = [
{name: "Tomato", quantity: 5, price: 2.99},
{name: "Potato", quantity: 6, price: 5.99}
];
// Now you can easily add them in the HTML:
for(var i=0; i<cartItems.length;i )
{
cell1.innerHTML = cartItems[i].name;
cell2.setAttribute('style', 'text-align: right;');
cell2.innerHTML = cartItems[i].quantity;
cell3.setAttribute('style', 'text-align: right;');
cell3.innerHTML = cartItems[i].price " USD";
}
// And you can also comapare them like this:
for (var i=0; i < cartItems.length; i ) {
if (itemArray[i].name === newItemEntry) {
cartItems[i].quantity = newQuantityEntry; // we add the quantity to the existing.
cartItems[i].price = (cartItems[i].price newExpectedPriceForEachEntry) / 2; // We average the price.
} else {
// else you push that item as a new object:
cartItems.push({
name: newItemEntry,
quantity: newQuantityEntry,
price: newExpectedPriceForEachEntry
});
}
};
Ответ №2:
не могли бы вы проверить следующий код.
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">
var itemArray = []
var quantityArray = []
var expectedPriceForEachArray = []
function addToListOfEntries () {
var table = document.getElementById("myEntries");
while(table.rows.length > 1) {
table.deleteRow(1);
}
var newItemEntry = document.getElementById("itemForm").value
var newQuantityEntry = document.getElementById("quantityForm").value
var newExpectedPriceforEachEntry = document.getElementById("expectedPriceForEachForm").value
var index = itemArray.indexOf(newItemEntry);
if( index > -1 ) {
quantityArray[index] = Number(quantityArray[index]) Number(newQuantityEntry);
expectedPriceForEachArray[index] = Number(expectedPriceForEachArray[index]) Number(newExpectedPriceforEachEntry);
}else{
itemArray.push(newItemEntry);
quantityArray.push(newQuantityEntry);
expectedPriceForEachArray.push(newExpectedPriceforEachEntry);
}
for(var i=0; i<itemArray.length;i )
{
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = itemArray[i];
cell2.setAttribute('style', 'text-align: right;');
cell2.innerHTML = quantityArray[i];
cell3.setAttribute('style', 'text-align: right;');
cell3.innerHTML = expectedPriceForEachArray[i] " USD";
}
}
</script>
<body>
<h1>
Enter an item, quantity, and the price you're expecting to pay.
</h1>
Item:<br>
<br>
<input type="text" placeholder="ketchup" id="itemForm">
<br>
<br> Quantity:
<br>
<br>
<input type="number" placeholder="25" id="quantityForm">
<br>
<br> Expected Price for Each:<br>
<br>
<input type="number" placeholder="2.99" id="expectedPriceForEachForm">
<br>
<br>
<button onclick="addToListOfEntries()">Add this entry to the list</button>
<br>
<br>
<table id="myEntries" border='1' width='400'>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Expected Price For Each</th>
</tr>
</table>
</body>
</html>
Ответ №3:
@dlac прав, но на последнем шаге я бы поработал с индексом, поскольку вам также нужно обновить таблицу.
var items = [];
function addNewItem()
{
var table = document.getElementById("myEntries");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var item =
{
name : document.getElementById("itemForm").value,
quantity: parseInt(document.getElementById("quantityForm").value),
price : parseInt(document.getElementById("expectedPriceForEachForm").value)
};
items.push( item );
cell1.innerHTML = item.name;
cell2.setAttribute('style', 'text-align: right;');
cell2.innerHTML = item.quantity;
cell3.setAttribute('style', 'text-align: right;');
cell3.innerHTML = item.price " USD";
}
function updateItem(item)
{
var idx = items.indexOf(item);
items[idx].price = parseInt(document.getElementById("expectedPriceForEachForm").value);
items[idx].quantity = parseInt(document.getElementById("quantityForm").value);
document.getElementById("myEntries").rows[idx 1].cells[2].innerHTML = items[idx].price " USD";
document.getElementById("myEntries").rows[idx 1].cells[1].innerHTML = items[idx].quantity;
}
function addToListOfEntries () {
var possibleUpdateItem = items.find(function(element) {
return element.name == document.getElementById("itemForm").value;
});
if(possibleUpdateItem)
{
updateItem(possibleUpdateItem);
}else
{
addNewItem();
}
} <h1>
Enter an item, quantity, and the price you're expecting to pay.
</h1>
Item:<br>
<br>
<input type="text" placeholder="ketchup" id="itemForm">
<br>
<br> Quantity:
<br>
<br>
<input type="number" placeholder="25" id="quantityForm">
<br>
<br> Expected Price for Each:<br>
<br>
<input type="number" placeholder="2.99" id="expectedPriceForEachForm">
<br>
<br>
<button onclick="addToListOfEntries()">Add this entry to the list</button>
<br>
<br>
<table id="myEntries" border='1' width='400'>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Expected Price For Each</th>
</tr>
</table>