wordpress：如何使用JS更改动态生成的div的内部HTML？错误：'cannot set property innerHTMl of null'

Question

我试图在Wordpress/Woocommerce上使用动态生成的div类更改"查看购物车"按钮的innerHTML。我问了一个之前的问题，有人建议(谢谢Mike:))，因为JS是一个onload事件，类只有在用户点击"添加到购物车"按钮后才会改变，所以JS永远不会及时运行。

我需要知道如何在任何人看到它之前更改"查看购物车"按钮的innerHTML。我想把"view cart"改成"view cats"

这是我的网站: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是我试图解决这个问题的一些方法的例子。

SOMETIMES出现'Cannot set property 'innerHTML' of null'消息，但是SOMETIMES没有。元素检查器显示JS正在加载!

我所做的顺序(步骤1，步骤2，步骤3):1. 通过将外部js表(viewcart.js)添加到子主题文件w/STFP.

，将js加载到我的Wordpress (使用子主题)。

在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' );
}
?> 

尝试将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';