时间戳

首页 > 解决方案 > Shopify 变体产品 - 未捕获的类型错误：无法读取 null 的属性“样式”

javascript - Shopify 变体产品 - 未捕获的类型错误：无法读取 null 的属性“样式”

问题描述

我在 Shopify 网站上工作，并试图关闭 4 包的订阅选项。

我有这段代码，但我遇到了一个我不熟悉的错误。希望有人能指出我正确的方向来解决。谢谢！

网站： https ://crispandcrude.myshopify.com/products/mellow-mule （密码：susahx）

错误： “未捕获的 TypeError：无法读取 null 的属性 'style'”

在此处输入图像描述

代码：

/* ======================================
    DISABLE 4 Pack Subscriptions
========================================= */
window.addEventListener('DOMContentLoaded', (event) => {

  let noSub = '4 Pack'
  let variants = document.querySelectorAll('[data-value]');
  let rechargeForm = document.querySelector('.rc_container')
  let initialCheckedValue = document.querySelector('.swatch input:checked')


  // On variant change
  variants.forEach(variant =>
                   variant.addEventListener('click', e=> {
    if (e.target.value == noSub) {
      // Hide RC widget and click first/one time option          
      rechargeForm.style.display = 'none'
      document.querySelector('.rc_widget__option--onetime input').click();
    } else {
      rechargeForm.style.display = 'block'
    }
  })
                  )

  // On first load
  if (initialCheckedValue.value == noSub) {
    // Hide RC widget and click first/one time option
    rechargeForm.style.display = 'none'
    document.querySelector('.rc_widget__option--onetime input').click();
  } else {
    rechargeForm.style.display = 'block'
  }

});

标签： javascriptshopifyvarianterror-code

解决方案

用 document.getElementById("DivID") 替换您的 chargeForm。注意：根据您的需要更新 id。

<!DOCTYPE html>
<html>
<head>
<style>
#DivID{
    width: 250px;
    height: 250px;
    background-color: blue;
}
</style>
</head>
<body>


<button onclick="clickFunction()">Click here to hide</button>

<div id="DivID">
This section will hide after click
</div>


<script>
function clickFunction() {
    document.getElementById("DivID").style.display = "none";
}
</script>  

</body>
</html>

推荐阅读