проверка на дублирование элемента

Question

Есть такой код, создающий элементы списка, программа "To Do". Все работает, но не могу придумать проверку, возвращающую alert c предупреждением, когда вводится уже существующая запись

// 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);
}

// Click on a close button to hide the current list 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";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ol');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if ( ) {
    alert("Такая задача уже есть");
  } else if (inputValue === '') {
    alert("Нужно что-то написать!");
  } 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";
    }
  }
}

.

Answer 1

Минимальный "To Do" на React.

Есть добавление и проверка на "такое уже есть": items.some(item=>item.caption===newCaption)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> todo with 2 columns </title>
<style>

div.itemGroup {
    display: inline-block;
    width: 40%;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
    vertical-align: top;
}

button {
    margin: 10px;
}

.alert {
    color: red;
}

</style>
</head>
<body>
<div class="container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
"use strict"

const { useEffect, useState }  = React
const e = React.createElement

const App = () => {
    const [ newCaption, setNewCaption ] = useState("")
    const [ items, setItems ] = useState([])
    const addItem = () => {
        setItems(cItems=>[...cItems,{ caption: newCaption, createdAt: Date.now() }])
        setNewCaption("")
    }
    const newCaptionNonEmpty = newCaption.length > 0
    const sameCaptionExists = items.some(item=>item.caption===newCaption)
    const canAddItem = newCaptionNonEmpty && !sameCaptionExists
    const willNotAddReason = !newCaptionNonEmpty ? ["введите описание"] : sameCaptionExists ? ["такое уже есть"] : null
    return [
        e("input", { key: "caption", value: newCaption, onChange: ev => setNewCaption(ev.target.value) }),
        e("button", { key: "create", onClick: ev => addItem(), disabled: willNotAddReason ? true : undefined }, "Create Task"),
        willNotAddReason && e("span", { key: "alert", className: "alert" }, willNotAddReason),
        e("div", { key: "itemsGroups" },
            e("div", { className: "itemGroup" },
                items.map(item => e("div", { key: item.createdAt }, item.caption) )
            ),
        )
    ]
}

ReactDOM.render(e(App), document.querySelector('.container'))

</script>
</body>
</html>

БЛОГ НА HUSL

проверка на дублирование элемента

Ответы (1 шт):