Эта программа предназначена для добавления и удаления элементов из массива. Раньше это было, пока я не попытался добавить проверку ошибок. В настоящее время ни одна из кнопок не работает правильно.

Кнопка «Добавить» предназначена для проверки дублирующихся записей. Если запись является дубликатом, должно отображаться предупреждение. В настоящее время отображается предупреждение «Повторяющаяся запись».

Кнопка «Удалить» предназначена для того, чтобы сначала проверить, есть ли запись в списке, если не отображается предупреждение. Если запись есть в списке, попросите пользователя подтвердить удаление записи. В настоящее время отображается предупреждение «Элемент не в списке».

Наконец, если возможно, как мне сделать так, чтобы каждый элемент в массиве отображался в новой строке?

Код:

var groceryList = [];

var groceryitem = document.getElementById('Text1').value;
var description = document.getElementById("groceryinfo");

function Add() {
  if (groceryitem != groceryList.includes(groceryitem)) {

    groceryList.push(groceryitem);

    description.innerText = groceryList.toString();
  } else {
    alert("Duplicate Entry");
  }
}

function Remove() {
  if (groceryList.includes(groceryitem)) {

    if (confirm("Do you want to delete item")) {
      for (var i = 0; i <= groceryList.length; i++) {

        if (groceryList[i] == groceryitem) {
          groceryList.splice(i, 1);
        }
        description.innerText = groceryList.toString();
      }
    } else {
      description.innerText = groceryList.toString();
    }
  } else {
    alert("Item not in list");

    description.innerText = groceryList.toString();
  }
}
My grocery list
<br/>
<br/>
<div id="groceryinfo"></div>
<br/>
<br/>
<input id="Button1" type="button" value="Add this item" onclick="Add()"/>
<input id="Text1" type="text"/>
<br/>
<input id="Button2" type="button" value="Remove this item" onclick="Remove()"/>
0
jeantaylor2021 15 Сен 2021 в 23:12

2 ответа

Лучший ответ

Исправлены некоторые проблемы здесь и там. Некоторые примечания:

  1. Вам нужно читать, что такое groceryitem каждый раз, когда вы вызываете Add() или Remove(), иначе, если вы прочитаете это в первый раз, это будет "" и больше никогда не будет обновляться.

  2. Чтобы отобразить элементы, вы не можете использовать groceryList.toString(), но groceryList.join(",").
    Если вы хотите, чтобы они были на большем количестве линий, вы можете использовать description.innerHTML = groceryList.join("<br/>");

  3. Нет необходимости сравнивать ваш товар со списком на groceryitem != groceryList.includes(groceryitem). Все, что вам нужно знать, это если !groceryList.includes(groceryitem) вашего товара нет в списке.

var groceryList = [];
var description;
description = document.getElementById("groceryinfo");

function Add() {
  var groceryitem = document.getElementById('Text1').value;
  if (!groceryList.includes(groceryitem)) {
    groceryList.push(groceryitem);
    document.getElementById('Text1').value = "";
    description.innerHTML = groceryList.join("<br/>");
  } else
    alert("Duplicate Entry");
}

function Remove() {
  var groceryitem = document.getElementById('Text1').value;
  if (groceryList.includes(groceryitem)) {

    if (confirm("Do you want to delete item")) {
      for (var i = 0; i <= groceryList.length; i++) {
        if (groceryList[i] == groceryitem) groceryList.splice(i, 1);
        description.innerText = groceryList.toString();
      }
    } else
      description.innerText = groceryList.toString();
  } else {
    alert("Item not in list");
    description.innerText = groceryList.toString();
  }

}
<body>
  My grocery list
  <br>
  <br>
  <div id="groceryinfo"></div>
  <br>
  <br>
  <input id="Button1" type="button" value="Add this item" onclick="Add()" /><input id="Text1" type="text" />
  <br>
  <input id="Button2" type="button" value="Remove this item" onclick="Remove()" />
1
Balastrong 15 Сен 2021 в 20:27

У вас есть проблемы в вашем коде, например:

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

  • вы делаете плохое сравнение в groceryitem != groceryList.includes(groceryitem), в основном потому, что includes возвращает логическое значение, а вы сравниваете его со строкой / undefined.

  • функция удаления хороша, но ее можно улучшить с помощью filter нравится:

if (confirm("Do you want to delete item")) {
   groceryList = groceryList.filter(gi => gi !== groceryitem);
   description.innerText = groceryList.toString();
}

Ниже вы можете найти снайпер с полностью работающим кодом.

var groceryList = [];
var groceryitem;
var description;
description = document.getElementById("groceryinfo");


function Add() {
  groceryitem = document.getElementById('Text1').value;
  if (!groceryList.includes(groceryitem)) {

    groceryList.push(groceryitem);
    description.innerText = groceryList.toString();
  } else
    alert("Duplicate Entry");
}

function Remove() {
  groceryitem = document.getElementById('Text1').value;
  if (groceryList.includes(groceryitem)) {

    if (confirm("Do you want to delete item")) {
      groceryList = groceryList.filter(gi => gi !== groceryitem);
      description.innerText = groceryList.toString();
    }
  } else {
    alert("Item not in list");
    description.innerText = groceryList.toString();
  }

}
<body>
  My grocery list
  <br>
  <br>
  <div id="groceryinfo"></div>
  <br>
  <br>
  <input id="Button1" type="button" value="Add this item" onclick="Add()" /><input id="Text1" type="text" />
  <br>
  <input id="Button2" type="button" value="Remove this item" onclick="Remove()" />
  <script>
  </script>
1
Prince Hernandez 15 Сен 2021 в 20:32