为什么我的 js 函数需要我的 php 迭代器中的一些东西？

如何解决为什么我的 js 函数需要我的 php 迭代器中的一些东西？

我在不同的页面上有两次 foreach 迭代。其中之一在主页上。我还有一个 js 脚本，它通过 ID 与两个迭代器的元素进行交互。

如何停止与主页上的迭代器交互？我已经把他的身份证去掉了。我现在也在主页上收到此错误

未捕获的类型错误：无法在 window.onload 处读取 null 的属性“getAttribute”

PHP/html 迭代器：

<? foreach($catalog_product as $key => $catalog_product_value): ?>
  <div class="card">
    .....
    <div class="card__side card__side--back card__side--back-1">
      <h3><?=$catalog_product_value['header']?></h3>
      <p class="flip-text"><?=$catalog_product_value['title']?></p>
      <?=$catalog_product_value['content']?>
      <div 
        data-item="product" 
        data-item_id="<?=$catalog_product_value['product_id']?>" 
        data-id="card_<?=($key + 1)?>" 
        data-title="<?=htmlspecialchars($catalog_product_value['header'])?>"
        <? if (!empty($catalog_product_value['options'])): ?>
          data-options="<?=htmlspecialchars(json_encode($catalog_product_value['options']),ENT_QUOTES,'UTF-8')?>"
        <? else: ?> 
          data-price="<?=preg_replace('/[^0-9.]+/','',$catalog_product_value['price'])?>"
        <? endif; ?>
        class="buy_product_form pop_maker">
          <?=$catalog_product_value['price']?>
      </div>
    </div>
  </div>
<? endforeach;?>

js 代码：

window.onload = function(){
  button = document.getElementById('buy_product_form');
  var atr = button.getAttribute('data-title');
      var id = button.getAttribute('data-id');
      var options = button.getAttribute('data-options');
      var price = button.getAttribute('data-price');
      var item_id = button.getAttribute('data-item_id');
      var item = button.getAttribute('data-item');
      button.id = id;

      var _form = document.createElement('form');
      .....
};