简体   繁体   English

wordpress:如何使用JS更改动态生成的div的innerHTML? 错误:“无法将属性innerHTMl设置为null”

[英]wordpress: How to Change innerHTML of Dynamically Generated divs using JS? Error: 'cannot set property innerHTMl of null'

I am trying to change the innerHTML of a "View cart" button with a dynamically generated div class on Wordpress/Woocommerce. 我正在尝试在Wordpress / Woocommerce上使用动态生成的div类更改“查看购物车”按钮的innerHTML。 I asked a previous question about this and was suggested (thank you Mike :) ) that because JS is an onload event, the class only changes after the user clicks an "add to cart" button so the js never runs in time. 我问了一个关于此的先前问题,并被建议(谢谢Mike :)),因为JS是一个onload事件,该类仅在用户单击“添加到购物车”按钮后才更改,因此js不会及时运行。

I need to know how to change the innerHTML of the "view cart" button before anyone sees it. 我需要知道如何任何人看到它之前更改“查看购物车”按钮的innerHTML。 I would like to change the words "view cart"--->"view cats". 我想更改“查看购物车” --->“查看猫”的字眼。

Here is my site: http://woocommerce-8778-19565-47619.cloudwaysapps.com/product-category/jewelry# . 这是我的网站: http : //woocommerce-8778-19565-47619.cloudwaysapps.com/product-category/jewelry# Please click "add to cart" and see "View cart" button appear. 请点击“添加到购物车”,然后看到“查看购物车”按钮出现。

I wrote some very basic JS: 我写了一些非常基本的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 are examples of some ways I tried to solve the issue. 3-4是我尝试解决此问题的一些方法的示例。

SOMETIMES the 'Cannot set property 'innerHTML' of null' message appears, but SOMETIMES it does not. 有时会出现“无法设置属性'innerHTML'为null”的消息,但有时却没有。 Element Inspector shows the JS is loading though! Element Inspector显示JS正在加载!

What I did in order (step 1, step 2, step 3): 1. Loaded the js to my Wordpress ( using CHILD theme ) by adding the external js sheet (viewcart.js) to the child theme file w/STFP. 我按顺序执行的操作(步骤1,步骤2,步骤3): 1.通过将外部js工作表(viewcart.js)添加到带有STFP的子主题文件中,将js加载到我的Wordpress中( 使用CHILD主题 )。

  1. Added the following to CHILD theme's functions.php: 在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. Tried changing true to false and removing one of the "true"/"false" from the php function. 尝试将true更改为false并从php函数中删除“ true” /“ false”之一。

I will choose best answer more quickly than last question (2 days ago). 我将比上一个问题(2天前)更快地选择最佳答案。 Thank you in advance for ANY help. 预先感谢您的任何帮助。 You guys are truly the best xo :) 你们确实是最好的xo :)

Document.querySelectorAll('button.added_to_cart') returns a list (nodelist) of the selectors in the document, that match '.added_to_cart'. Document.querySelectorAll('button.added_to_cart')返回文档中与“ .added_to_cart”匹配的选择器的列表(节点列表)。 As Ian said, the best way would be to loop this list and change their element's inner html one by one. 正如Ian所说,最好的方法是循环此列表,并逐一更改其元素的内部html。 CSS Pseudo-classes will never return any elements. CSS伪类将永远不会返回任何元素。 Edited: You could also use var elements = document.getElementsByClassName('added_to_cart'); 编辑:您还可以使用var elements = document.getElementsByClassName('added_to_cart'); For ( var i=0; i < elements.length; i++) elements[i].innerHtml = 'view cats'; 对于(var i = 0; i <elements.length; i ++)elements [i] .innerHtml ='view cats';

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM