Блог

Главная - Вопросы по программированию - Отображение элементов массива, проверка на дубликаты и удаление элементов в массиве

Отображение элементов массива, проверка на дубликаты и удаление элементов в массиве

#javascript

Вопрос:

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

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

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

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

Код:

 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()"/>

Комментарии:

1. Почему бы вам не добавить кнопку «Удалить» (т. Е. X) рядом с каждым элементом списка?

Ответ №1:

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

  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()" />

Ответ №2:

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

  • вы получаете только в первый раз groceryitem , это должно быть в области функций, чтобы получать значение каждый раз, когда вы запускаете свою функцию. то же самое относится и к удалению.
  • вы делаете плохое сравнение , в groceryitem != groceryList.includes(groceryitem) основном потому includes , что возвращает логическое значение, и вы сравниваете его со строкой/неопределенным.
  • функция удаления хороша, но ее можно улучшить, используя 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>
Метки: ,