纯JavaScript实现输入值与li内容对比，避免待办列表重复项

嘿，我看了你写的待办事项代码，要实现禁止添加重复项的功能其实不难，咱们只需要完善addItem函数里的对比逻辑就行，我来给你梳理一下修改步骤和完整代码：

问题分析 #

你原代码里的循环对比部分是空的，还有两个小细节需要调整：

• 一开始获取的listItem是静态DOM集合，添加新项后不会自动更新，导致遍历的时候拿不到最新的列表元素
• 空值判断的逻辑位置不对，应该先检查输入是否为空，再去判断是否重复

解决方案 #

修改addItem函数，主要完成这几件事：

1. 先获取输入值并去除首尾空格（避免空格导致的误判）
2. 优先判断输入是否为空，为空则直接提示并终止函数
3. 动态获取当前所有的li元素（每次添加前都重新获取，保证拿到最新的列表）
4. 遍历现有li元素，对比它们的纯任务文本和输入值，标记是否存在重复
5. 只有当输入不为空且无重复时，才添加新项

修改后的完整JS代码 #

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

// Append close btn to each list item
var listItem = document.getElementsByTagName("LI");
for (var i = 0; i < listItem.length; i++) {
 var span = document.createElement("SPAN");
 var txt = document.createTextNode("×");
 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';
 }
}

// Check if ul exists, otherwise code will stop executing
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 click
btn.addEventListener('click', addItem);

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

// Add item to list
function addItem() {
 var inputValue = document.getElementById('task').value.trim(); // Remove leading/trailing spaces
 var isDuplicate = false;

 // First check if input is empty
 if (!inputValue) {
 alert("No empty values are allowed!");
 return; // Terminate function if input is empty
 }

 // Dynamically get all current li elements to avoid static collection issues
 var currentItems = document.getElementsByTagName("LI");
 // Iterate through existing items to check for duplicates
 for (var i = 0; i < currentItems.length; i++) {
 // Extract pure task text, removing the close button's "×" and extra spaces
 var itemText = currentItems[i].textContent.replace('×', '').trim();
 if (itemText === inputValue) {
 isDuplicate = true;
 break; // Exit loop early if duplicate is found
 }
 }

 // Add new item only if no duplicate exists
 if (!isDuplicate) {
 var li = document.createElement("li");
 li.setAttribute('id', inputValue); // Use trimmed value for id to avoid space issues
 li.appendChild(document.createTextNode(inputValue));
 ul.appendChild(li);

 // Add close button to new item
 var span = document.createElement("SPAN");
 var txt = document.createTextNode("×");
 span.className = "js-close";
 span.appendChild(txt);
 li.appendChild(span);

 // Bind click event to new close button
 span.onclick = function() {
 var div = this.parentElement;
 div.className = 'js-hide';
 };
 } else {
 alert("This task already exists!"); // Prompt user about duplicate
 }

 // Clear input field
 document.getElementById("task").value = "";
}

关键点解释 #

• trim()的使用：去除输入值和li文本的首尾空格，避免因为空格导致的“假重复”（比如输入" 吃饭 "和现有"吃饭"被误判为不同）
• 动态获取li元素：每次添加前都用document.getElementsByTagName("LI")获取最新的列表，解决静态DOM集合不更新的问题
• 处理close按钮文本：每个li里都有一个"×"，对比时需要去掉这个字符，只对比真实的任务内容
• 标记变量isDuplicate：用布尔变量记录是否找到重复项，让逻辑更清晰，也便于提前终止循环提高效率

这样修改后，就能完美阻止重复待办项的添加啦～

内容的提问来源于stack exchange，提问作者Meggie17