Checkout页面使用querySelector取价格Tag manager返回空值求助

现有代码的核心问题 #

• 你在判断元素是否存在之前，就直接调用了document.querySelector(...).innerText，如果对应元素不存在，querySelector会返回null，调用null.innerText会直接抛出异常，直接进入catch逻辑返回空字符串
• 代码中引用的capturedText变量没有定义，运行到对应分支时也会抛出异常进入catch
• 重复执行了两次document.querySelector(".order-number>strong")查询，属于冗余操作

修复后可正常运行的代码 #

function() {
  try {
    // 先查询元素实例，不直接读取属性避免空值报错
    const prepaymentEl = document.querySelector(".order-number>strong");
    const paypalEl = document.querySelector(".checkout-success>p>span");
  
    if (prepaymentEl) { // Prepayment渠道元素存在则返回对应值
      return prepaymentEl.innerText.trim();
    } else if (paypalEl) { // Paypal渠道元素存在则返回对应值
      return paypalEl.innerText.trim();
    }
    // 两个元素都不存在时返回空
    return "";
  } catch(e) {
    // 极端异常场景兜底，不会阻塞页面其他脚本运行
    return "";
  }
}

逻辑说明 #

• 所有DOM查询先存元素实例，判断非空后再读取文本属性，从根源避免空值调用报错
• 去掉了未定义的变量，所有返回值都直接从存在的元素上读取
• 保留try/catch做兜底，即使遇到DOM结构异常、跨域限制等极端情况也只会返回空，不会影响页面其他脚本运行
• 覆盖了两个元素都不存在的边界场景，逻辑更严谨

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