javascript - wordpress:如何使用 JS 更改动态生成的 div 的 innerHTML？错误: 'cannot set property innerHTMl of null'

Question

我正在尝试使用 Wordpress/Woocommerce 上动态生成的 div 类更改“查看购物车”按钮的 innerHTML。我之前问过一个关于这个的问题，有人建议(谢谢 Mike :))因为 JS 是一个 onload 事件，所以类只会在用户单击“添加到购物车”按钮后发生变化，因此 js 永远不会及时运行。

我需要知道如何在任何人看到之前更改“查看购物车”按钮的 innerHTML。我想更改“查看购物车”--->“查看猫”这几个字。

这是我的网站:http://woocommerce-8778-19565-47619.cloudwaysapps.com/product-category/jewelry# .请点击“添加到购物车”并看到“查看购物车”按钮出现。

我写了一些非常基础的 JS:

   1. window.onload = function viewcart(){
   2.   document.querySelectorAll('.added_to_cart').innerHTML="view cats";
   3.  //  document.querySelector('a.added_to_cart.wc-forward:before').innerHTML="view cats";
   4. //  document.getElementsByClassName('.wc-forward::after').innerHTML="view cats";
   5. }

3-4 是我尝试解决问题的一些方法的示例。

有时 会出现“无法设置 null 的属性 'innerHTML'”消息，但有时 不会。 Element Inspector 显示 JS 正在加载!

我按顺序做了什么(第 1 步、第 2 步、第 3 步):1. 通过将外部 js 表 (viewcart.js) 添加到带有 STFP 的子主题文件，将 js 加载到我的 Wordpress(使用子主题)。

1. 在 CHILD 主题的 functions.php 中添加了以下内容:

   <?php
   add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
   function child_add_scripts() {
   wp_register_script(
   'viewcartscript',
   get_stylesheet_directory_uri() . '/viewcart.js',
   true,
   false
   );
   wp_enqueue_script( 'viewcartscript' );
   }
   ?> 
   

2. 尝试将 true 更改为 false 并从 php 函数中删除“true”/“false”之一。

我会比上一个问题(2 天前)更快地选择最佳答案。预先感谢您的任何帮助。你们真的是最棒的xo :)

Answer 1

Document.querySelectorAll('button.added_to_cart') 返回文档中匹配 '.added_to_cart' 的选择器列表(节点列表)。正如 Ian 所说，最好的方法是循环此列表并逐个更改其元素的内部 html。CSS 伪类永远不会返回任何元素。

编辑:您还可以使用:

var elements = document.getElementsByClassName('added_to_cart');
for ( var i=0; i < elements.length; i++)
   elements[i].innerHtml = 'view cats';