Как прописать проверку для защиты от дублирования данных?

Question

[letProgrammer]

На HTML-странице располагаются два элемента: -input- с идентификатором "fieldForData" и событийная кнопка -button- . Идея такая, что при вводе данных в поле -input- , после нажатия кнопки данные из поля (input.value) должны быть внесены в созданный посредством JS элемент неупорядоченного списка. Вопрос следующий: как прописать некую защиту от дублирования, чтобы было проигнорировано действие кнопки -button- в случае попытки создания элемента -li- с данными, которые уже существуют в разметке?

var accessToInput = document.getElementById('fieldForData')
accessToInput.value = 'Enter here some text'
var actionButton = document.querySelector('button')
var ul = document.createElement('ul')
document.body.appendChild(ul)
actionButton.addEventListener('click', function(){
	console.log("You've just made a mouse click")
	var li = document.createElement('li')
	if(accessToInput.value !== "" && accessToInput.value.toUpperCase() !== li.textContent.toUpperCase()){
		li.innerHTML = accessToInput.value.toUpperCase()	
		ul.appendChild(li)
		accessToInput.value = ''		
	}
})

Хотел организовать проверку с помощью условного оператора. Первая удовлетворяет требованиям: при пустом поле -input- новые элементы списка создаваться не будут. Вторая (которая находится справа от логического оператора "И") видимо придумана и записана некорректно.

Comments

[Seanyr]

В вашей проверке вы сравниваете значение инпута с только что созднанным на предыдущей строке li. Само собой в нем ничего нет.

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

Либо другой вариант, пробегать по всем потомкам ul, и сравнивать введенное значение с ними.

Так же нет смысла создавать li до того как сделана проверка, потому что если она не пройдена, li будет не нужен.
И лучше не использовать innerHTML, записывайте безопасным textContent

[letProgrammer]

Seanyr, мои многочасовые потуги к успеху так и не привели :(

var dataArray = []
var someData = document.getElementById('fieldForData')

var ul = document.createElement('ul')
document.body.appendChild(ul)

var actionButton = document.querySelector('button')
actionButton.addEventListener('click', function(){
	for(let element of dataArray){
			if(element !== someData.value){
				dataArray.push(someData.value)
				var li = document.createElement('li')
				li.textContent = someData.value.toUpperCase()
				ul.appendChild(li)
				console.log(element)
		}
	}
})

[Seanyr]

letProgrammer, ну для начала в for даже не попадает
> создается пустой массив
> цикл перебирает всё еще пустой массив <-- вот здесь затык
> внутри этого цикла массив должен заполняться

Answer 1

[Seanyr]

Вот, допилил ваш вариант, чтобы работал:

let dataArray = [];
let someData = document.getElementById('fieldForData');

let ul = document.createElement('ul');
document.body.appendChild(ul);

let actionButton = document.querySelector('button');
actionButton.addEventListener('click', function() {
    let data = someData.value.toUpperCase();
    //если значение пустое или есть в массиве, то ничего не делаем
    if (!data || dataArray.indexOf( data ) != -1) return;
    dataArray.push(data);
    let li = document.createElement('li');
    li.textContent = data;
    ul.appendChild(li);
});

Comments

[letProgrammer]

Спасибо за ваше время. Код работает.

Могу ли я попросить вас проверить ход моих мыслей при анализе условного оператора if? Потому что для меня важно понимать абсолютно все тонкости.
Итак, по правилам функционирования логического оператора «ИЛИ», если один из операндов принимает значение true, то будет выполнена инструкция в фигурных скобках, либо, как у вас, выполнится «конструкция» return (что означает return без указание значения? прерывание указанного действия?). Если же ВСЕ операнды в скобках принимают значение false, то «конструкция» return игнорируется, и значение переменной data «пушится» в конец массива dataArray.
Теперь по поводу истинности операндов. Левый. При нажатии по кнопке когда поле инпута пустое получаем: data value = empty string, Boolean(empty string) = false. Однако логический оператор «НЕ» перед операндом data переводит его булево значение в true. Проверка на предмет пустого значения инпута работает! Проверяем правую (полагая, что Boolean(операнд в левой) == false). Получается, что метод indexOf() является подобием цикла, который перебирает все элементы массива и возвращает индекс первого символа искомой фразы, когда обнаружено первое совпадение. То есть, чтобы избежать повторного занесения в массив одинаковых данных Boolean(dataArray.indexOf(data) = -1) должно иметь значение true. Значение «-1» возвращается, когда совпадений в массиве НЕ НАЙДЕНО! Нас же интересует противоположный эффект. Поэтому и использует оператор «НЕ» перед знаком «=».

Вопросы:
1) Понимаю, что по большей части метод indexOf() является самым оптимальным решением. Однако, можно ли реализовать этот метод в контексте данной задачки с помощью обычного цикла for?
2) В разных источниках (в том числе зарубежных монографиях) порой встречается противоречивая информация. Так всё-таки, нужно использовать точку с запятой в конце строки или нет?
3) Мне удалось уловить предыдущую версию вашего решения. Там к одной из строк, где значение инпута заносится в переменную, был оставлен комментарий «чтобы каждый раз не дергать из DOM». Мне не совсем понятен этот момент. Мы же объявляем эту переменную внутри функции, обращаемся к ней при каждом клике по кнопке, значит, каждый раз «дергаем» элемент из DOM.

[Seanyr]

что означает return без указание значения?

return останавливает выполнение текущей функции, и возвращает из неё своё значение, в данном случае ничего (если уж глубже, то возвращается undefined)

в целом всё верно поняли

1. можно, но тогда нам потребуется дополнительная логическая переменная чтобы хранить промежуточный результат проверки, либо функция которая его возвращает. И вот уже её мы вставляем вместо правой части условия в if
2. Лучше использовать, чем не использовать. Можно и не ставить, но это вредная привычка и из за неё в некоторых случаях могут возникать ошибки
3. Это значение используется несколько раз за функцию, и каждый раз она его берет из DOM. Чтобы этого избежать мы в самом начале заносим значение в локальную переменную, и дальше уже работаем с ней. К тому же у переменной появилось еще одно назначение, вы добавляете в список значения в верхнем регистре, соответственно все операции лучше проводить в нем, такие как добавление в массив и проверка наличия в массиве

Если вы хотите хорошо и глубоко изучать js, то могу посоветовать этот ресурс
Прямо берете и с первой главы, даже если думаете что уже знаете эту тему, там можно узнать какие-то тонкости. Задания тоже важны, для закрепления и понимания некоторых механик.
А если js вам обычно не требуется, то и не нужно слишком много времени тратить

Answer 2

[v3shin]

Сохраняйте введенные данные в массив и перед вставкой проверяйте их наличие в этом массиве.