在纯Javascript中将输入值与li内容进行比较

时间：2018-05-16 12:59:44

标签： javascript arrays

我必须做某种待办事项列表，我有输入和按钮添加项目到ul列表。现在我做了所有事情，除了比较每个li项目的输入值。我的问题是如何将每个li内容与值输入进行比较以防止重复项目。这是代码https://jsfiddle.net/qoLtxfaw/1/ 

// Variables
var ul = document.getElementById("taskList");
var task = document.getElementById("task");
var btn = document.querySelector('button');
var listItem = document.getElementsByTagName("LI");

// Append close btn to each list item
for (var i = 0; i < listItem.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "js-close";
  span.appendChild(txt);
  listItem[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("js-close");
for (var i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.className = 'js-hide';
  }
}

// proveravati ima li ul odnosno liste, ukoliko ne proverimo a nema ceo kod ce prestati da se izvrsava
if (ul) {
  ul.onmouseover = function(event) {
    var target = event.target;
    target.style.background = '#efebeb';
  };

  ul.onmouseout = function(event) {
    var target = event.target;
    target.style.background = '';
  };
}

// Add item to list on btn
btn.addEventListener('click', addItem);

// Add item to list on enter
task.onkeyup = function(e) {
  if (e.keyCode == 13) {
    addItem();
  }
};

// // Add item to list
function addItem() {
  var li = document.createElement("li");
  var inputValue = document.getElementById('task').value;
  li.setAttribute('id', task.value);
  li.appendChild(document.createTextNode(task.value));
  // ul.appendChild(li);

  // compare every li item with inputValue
  if (inputValue) { //if input value is true and has some value
    //go trough all li items
    for (var i = 0; i < listItem.length; i++) {
      // compare every li item with inputValue

    }

    // Duplicate values don't allow in list
    if (!inputValue) {
      alert("No empty values are allowed!");
      li.className = 'js-btn-disable';
    } else {
      ul.appendChild(li);
    }
    document.getElementById("task").value = "";


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

    for (var i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        var div = this.parentElement;
        div.className = 'js-hide';
      }
    }
  }

}
#wrapper {
  width: 500px;
  margin: 0 auto;
  background: #00bcd4;
  border: 1px solid #f1f0f0;
  padding-left: 10px;
  font-size: 1.2em;
}

#wrapper #task {
  background: transparent;
  color: #ffffff;
  font-size: 1.2em;
  width: 80%;
  height: 35px;
  border: none;
  border-bottom: 2px solid #ffffff;
  outline: none;
  margin: 15px 0 5px 0;
}

#wrapper #task ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ffffff;
}

#wrapper #task ::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
}

#wrapper #task :-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
}

#wrapper #task :-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
}

#wrapper button {
  font-size: 1.2em;
  border: 2px solid #ffffff;
  background: transparent;
  color: #ffffff;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
}

#wrapper ul#taskList {
  padding: 0;
  background: #ffffff;
  list-style-type: none;
  text-align: left;
  margin-bottom: 0;
  margin-left: -10px;
}

#wrapper ul#taskList li {
  padding: 10px;
  position: relative;
  cursor: pointer;
}


/* Style the close button */

.js-close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}

.js-close:hover {
  color: #ffffff;
}

.js-hide {
  display: none;
}

.js-background {
  background: #efebeb;
}

.js-btn-disable {
  opacity: 0.65;
  cursor: not-allowed;
}


/*# sourceMappingURL=style.css.map */
<div id="wrapper">
  <input type="text" id="task" />
  <button>Add</button>

  <ul id="taskList"></ul>

</div>

1 个答案:

答案 0 :(得分：1)

看看这个。我使用firstChild，我将验证移到了函数的顶部。

我在验证后使用inputValue，但在其他地方执行任务。

干 - 不要重复自己

// Variables
var ul = document.getElementById("taskList");
var task = document.getElementById("task");
var btn = document.querySelector('button');
var listItem = document.getElementsByTagName("LI");
task.focus();

// Append close btn to each list item
for (var i = 0; i < listItem.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "js-close";
  span.appendChild(txt);
  listItem[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("js-close");
for (var i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.className = 'js-hide';
  }
}

// proveravati ima li ul odnosno liste, ukoliko ne proverimo a nema ceo kod ce prestati da se izvrsava
if (ul) {
  ul.onmouseover = function(event) {
    var target = event.target;
    target.style.background = '#efebeb';
  };

  ul.onmouseout = function(event) {
    var target = event.target;
    target.style.background = '';
  };
}

// Add item to list on btn
btn.addEventListener('click', addItem);

// Add item to list on enter
task.onkeyup = function(e) {
  if (e.keyCode == 13) {
    addItem();
  }
};

// // Add item to list
function addItem() {
  var inputValue = task.value.trim();
  task.value = "";
  task.focus();
  
  // Empty or  Duplicate values don't allow in list
  if (!inputValue) {
    alert("No empty values are allowed!");
    return
  }

  var listItem = document.querySelectorAll("#taskList li");
  for (var i = 0; i < listItem.length; i++) {
    if (inputValue == listItem[i].firstChild.textContent) {
      alert("No duplicate values are allowed!");
      return
    }
  }


  var li = document.createElement("li");
  li.setAttribute('id', inputValue);
  li.appendChild(document.createTextNode(inputValue));
  ul.appendChild(li);


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

  for (var i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.className = 'js-hide';
    }
  }
}
#wrapper {
  width: 500px;
  margin: 0 auto;
  background: #00bcd4;
  border: 1px solid #f1f0f0;
  padding-left: 10px;
  font-size: 1.2em;
}

#wrapper #task {
  background: transparent;
  color: #ffffff;
  font-size: 1.2em;
  width: 80%;
  height: 35px;
  border: none;
  border-bottom: 2px solid #ffffff;
  outline: none;
  margin: 15px 0 5px 0;
}

#wrapper #task ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ffffff;
}

#wrapper #task ::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
}

#wrapper #task :-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
}

#wrapper #task :-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
}

#wrapper button {
  font-size: 1.2em;
  border: 2px solid #ffffff;
  background: transparent;
  color: #ffffff;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
}

#wrapper ul#taskList {
  padding: 0;
  background: #ffffff;
  list-style-type: none;
  text-align: left;
  margin-bottom: 0;
  margin-left: -10px;
}

#wrapper ul#taskList li {
  padding: 10px;
  position: relative;
  cursor: pointer;
}


/* Style the close button */

.js-close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}

.js-close:hover {
  color: #ffffff;
}

.js-hide {
  display: none;
}

.js-background {
  background: #efebeb;
}

.js-btn-disable {
  opacity: 0.65;
  cursor: not-allowed;
}


/*# sourceMappingURL=style.css.map */
<div id="wrapper">
  <input type="text" id="task" />
  <button>Add</button>

  <ul id="taskList"></ul>

</div>

相关问题
最新问题