John Huebner

I recently had a similar problem with my own script that required checking that the element actually existed before trying to set a value when using document.querySelector. The problem is that at that location in your code the element does not exist.

Not sure what you want need. This is for a client. The site is running on wordpress.com. I can’t set script debugging on there or I would give you more detail on the line in the code causing the issue.

Theme: Alves

Plugins:
Akismet
Elementor
Elementor Pro
Elementor Header & Footer Builder
Form Vibes
Jetpack
Safe Redirect Manager
Smush
Ultimate Addons for Elementor
WP Rocket
WPCode Light (this plugin I have checked code added using this plugin but none of it affects the admin menu)
Yoast SEO

This error happens both on the front end of the site when logged in and in the admin. The error causes the admin menu at the top of the page to be broken and not work. It also blocks some other scripts from running do to this error.

This error does not happen when not logged into the site

Error from the admin

Uncaught TypeError: document.querySelector(...) is null

/wp-content/plugins/insert-headers-and-footers/build/admin-bar.js?ver=5d377aa89c93914bb91207685348f326

Line/Char: 1:1050

0===wpcode_admin_bar_info_count&&(document.querySelector('#wp-admin-bar=wpcode-loaded-on-this-page .wp-admin-bar-arrow).style.display="none");

Page on site with issue https://www.rudyschmid.com/vehicle-maintenance/rust-proofing/

Here is the HTML generated by this plugin:

<div class="hbupro-hero-banner-wrp-1 hbupro-clearfix hbupro-layout-2">
  <div class="hbupro-hero-banner hbupro-clearfix">
    <div class="hbupro-hero-banner-inner hbupro-clearfix">
      <div class="hbupro-hero-banner-inner-wrap">
        <div class=" hbupro-medium-12 hbupro-columns hbupro-hero-content-position hbupro-text-center">
          <h2 class="hbupro-hero-banner-title">Rust Proofing for Your Vehicle</h2>
          <div class="hbupro-hero-banner-sub-title">
            <p>Keep Rust at Bay on Your Car in CNY's Unpredictable Weather</p>
          </div>
          <div class="hbupro-hero-banner-links">
            <a class="hbupro-button hbupro-rudy-dark-red" href="https://www.rudyschmid.com/vehicle-maintenance/rust-proofing-faqs/">FAQs</a>
            <a class="hbupro-button hbupro-rudy-dark-red" href="https://www.rudyschmid.com/contact-us/">Contact Us</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the CSS

<style type="text/css">
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner {
    background-image: url(https://www.rudyschmid.com/wp-content/uploads/2020/06/DSC04593-2-scaled.jpg); 
    background-size:cover;
    background-position: 50% center;
    background-attachment: fixed
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-inner {
    background-color:#b72a2a;
    opacity:0.4;
  } 
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner-inner-wrap{
    max-width: px;
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner h2.hbupro-hero-banner-title {
    font-size: 30px !important;
    line-height: 30px !important;
    color:#fff
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-sub-title p,
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-sub-title {
    font-size: 20px !important;
    color:#fff
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner-inner {
    padding:150px 0px 150px 0px
  }
</style>

As you can see the the content (title, subtitle, ect) is contained by the element with the selector:

.hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-inner

This element is set to an opacity of 0.4 as defined in the overlay opacity when creating this banner. Because the entire element is set to this opacity all of the elements that it contains are also set to this opacity, making the text semi-transparent. It is not possible to set the inner elements of a container to higher opacity than the container.

To correct this either 1) the text cannot be contained in the overlay element or 2) an RBGA color value must be used for the background color of the overaly instead of setting the opacity of the entire overlay container.

Transparent text is not the desired result, only a semi-transparent overlay of the image is the desired result.

• This reply was modified 2 years, 10 months ago by John Huebner.

I am also getting the error “Your changes were not saved due to an error (or you made none!).” I have max_input vars set at 10000