求助：如何编写函数检查数组中指定ID的元素是否存在？

问题描述 #

需要编写函数检查特定ID的元素是否存在，已将待验证ID存入数组：let CartArray = ["cart-0", "cart-1", "cart-2", "cart-3"]，编写的JavaScript代码如下，但点击检查按钮后无任何反应：

//=== === === Cart === === ===\
$(document).ready(function() {
  //========= checking the presence of items in the cart when the page is loaded =========\
  if(document.getElementById('myDIV').childElementCount == 0) {
    document.getElementById('myDIV').innerHTML = "cart is empty";
  }
  
  const element = document.getElementById('myDIV');
  const numberOfChildren = element.childElementCount; //====== Number of items in the cart

  //========= Changing ::before for the cart when the page is loaded =========\
  for(var i = 0; i < numberOfChildren; i++) {
    CartCount++;
  }
  document.getElementById("CountCartS").setAttribute('CartCountS', CartCount);

  //========= Add to cart (number changes) =========\
  $("#button-count").click(function () {
    CartCount++;
    document.getElementById("CountCartS").setAttribute('CartCountS', CartCount);
  });

  const button = document.querySelector('#button');
  
  button.addEventListener('click', function() {
    for(var i = 0; i < numberOfChildren; i++) {
      const parent = document.getElementById('myDIV');
      const child = parent.children[i];
      
      if(parent.childElementCount > 0) {
        if(child.id == CartArray[i]) {
          alert(child.id + " --- there is a div with this id");
        }
        else if(child.id != CartArray[i]) {
          alert(child.id + " --- does not have a div with that id");
        }
      }
      else if(parent.childElementCount == 0) {
        document.getElementById('myDIV').innerHTML = "cart is empty";
      }
      else {
        alert("Error");
      }
    }
  });
});

问题分析 #

1. 固定子元素数量导致循环失效：numberOfChildren是页面加载时获取的子元素数量，后续添加元素后这个值不会更新，点击检查按钮时仍用初始值循环，若初始时myDIV为空，循环根本不会执行。
2. 索引对应逻辑错误：代码中假设子元素的索引和CartArray的索引一一对应（即第i个子元素ID等于CartArray[i]），但实际添加的元素ID不一定和索引匹配，导致判断逻辑混乱。
3. 未初始化CartCount：变量CartCount没有初始值，会导致计算时出现NaN，影响后续功能。
4. 检查逻辑方向错误：应该遍历CartArray中的每个ID去验证元素是否存在，而非遍历子元素去匹配数组索引。

解决方案 #

修改代码解决上述问题，核心调整如下：

• 初始化CartCount为0；
• 检查元素时遍历CartArray，直接用document.getElementById()判断每个ID的元素是否存在；
• 动态获取当前子元素数量，避免用固定值；
• 优化购物车数量计算逻辑。

修改后的完整代码：

$(document).ready(function() {
  let CartCount = 0; // 初始化购物车数量
  const CartArray = ["cart-0", "cart-1", "cart-2", "cart-3"];
  const cartContainer = document.getElementById('myDIV');
  const countElement = document.getElementById("CountCartS");

  // 页面加载时检查购物车状态
  function updateCartStatus() {
    if (cartContainer.childElementCount === 0) {
      cartContainer.innerHTML = "cart is empty";
      CartCount = 0;
    } else {
      // 重新计算购物车实际数量
      CartCount = cartContainer.childElementCount;
    }
    countElement.setAttribute('CartCountS', CartCount);
  }

  // 初始化购物车状态
  updateCartStatus();

  // 添加到购物车按钮事件
  $("#button-count").click(function () {
    // 实际添加元素到myDIV，示例中按顺序生成ID
    const newItem = document.createElement('div');
    newItem.id = `cart-${CartCount}`;
    newItem.textContent = `Item ${CartCount}`;
    cartContainer.innerHTML = ""; // 清空默认文本
    cartContainer.appendChild(newItem);
    
    CartCount++;
    countElement.setAttribute('CartCountS', CartCount);
  });

  // 检查元素存在性按钮事件
  const checkButton = document.querySelector('#button');
  checkButton.addEventListener('click', function() {
    updateCartStatus(); // 先更新最新状态
    
    if (cartContainer.childElementCount === 0) {
      cartContainer.innerHTML = "cart is empty";
      return;
    }

    // 遍历CartArray中的每个ID，检查元素是否存在
    CartArray.forEach(id => {
      const element = document.getElementById(id);
      if (element) {
        alert(`${id} --- 存在该ID的元素`);
      } else {
        alert(`${id} --- 不存在该ID的元素`);
      }
    });
  });
});

关键修改说明 #

1. 初始化CartCount：避免NaN问题，确保数量计算正确。
2. updateCartStatus函数：统一处理购物车状态更新，动态获取当前子元素数量，避免固定值导致的错误。
3. 检查逻辑调整：遍历CartArray中的每个ID，直接用document.getElementById(id)判断元素是否存在，逻辑更直接准确。
4. 添加元素逻辑补全：原代码中#button-count点击事件只增加了数量，没有实际添加元素，这里补全了元素添加逻辑，确保功能完整。

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