1

Всем добрый день! у меня есть список в который я вношу города вместе со странами, мне нужно добавить условие: что элемент который есть в списке, добавить снова уже нельзя.

вот мой html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test German Varanytsya</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<form id="zip">
<div id="myDiv" class="header">
<h2 style="margin:5px">Test</h2>
<input type="text" id="myInput" placeholder="Plase type city and 
state">
<button type="submit" onclick="newElement(event)"
class="addBtn">Add</button>
</div>
</form>

<ul id="myUl">
<li>Moscov,Russia</li>
<li>Odessa,Ukraine</li>
<li>New York,USA</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>

а вот то что у меня есть в JavaScript:

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}

// close item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}

// Create a new item
function newElement(event) {
event.preventDefault()
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUl").appendChild(li);
}
document.getElementById("myInput").value = "";

var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);

for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}

Помогите пожалуйста добавить эту валидацию... проверить есть ли в списке подобный элемент, если ДА то добавить его нельзя

4 ответа 4

0

Во-первых, можно перебрать все элементы списка в цикле и проверить:

var searchElements = document.getElementById('myUl').getElementsByTagName('li');
for (var i=0; i < searchElements.length; i++) {
    if (searchElements[i].textContent.slice(0, -1) == inputValue) {
        alert ('Такой элемент уже есть в списке');
        return;
    }
}

Во-вторых, можно поступить более изящно, записывать все вводимые значения в массив и проверять, есть ли уже такое значение встроенным в него методом indexOf.

// необходимо заранее объявить переменную elements = []
if (elements.indexOf(inputValue) != -1) {
    alert ('Такой элемент уже есть в списке');
    return;
}
elements.push(inputValue);

Ну и в-третьих, для этих целей можно использовать функции библиотек, типа lodash или jQuery.

1
  • Спасибо большое за помощь! 13 июл 2018 в 14:54
0

ну во первых вы можете использовать штатную функцию из jqery

jQuery.inArray()

и проверить есть ли такое значение в массиве. или использовать нативное решение

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);// проверит есть ли такой элемент в массиве и если  нет вернет '-1'
while (idx != -1) {
 // тут действия если в массиве нет такого элемента
}

извиняюсь что код не чистый просто указываю направление

0

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}

// close item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}

// Create a new item
function newElement(event) {
event.preventDefault()
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
var x ;

	/***Add loop**/
	for  (let i = 0; i < myNodelist.length;i += 1){
		let word = myNodelist[i].innerHTML;
		if (word.search(inputValue) > -1){
			x = true;
			break;
		}
	}
if (inputValue === '') {
alert("You must write something!");
}else if(x === true){
	alert('This name we have');
}
else {
document.getElementById("myUl").appendChild(li);
}
document.getElementById("myInput").value = "";

var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);

for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}

-1

Например с помощью библиотеки lodash

Найти индекс элемента в массиве https://lodash.com/docs/4.17.10#findIndex

или

Оставить в массиве только уникальные значения https://lodash.com/docs/4.17.10#uniq

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.