Using javascript to change CSS on page?

Question

I am using this Javascript to load a chat box on my website:

 window.HFCHAT_CONFIG = {
     EMBED_TOKEN: "XXXXX",
     ACCESS_TOKEN: "XXXXX",
     HOST_URL: "https://happyfoxchat.com",
     ASSETS_URL: "https://XXXXX.cloudfront.net/visitor"
 };

(function() {
  var scriptTag = document.createElement('script');
  scriptTag.type = 'text/javascript';
  scriptTag.async = true;
  scriptTag.src = window.HFCHAT_CONFIG.ASSETS_URL + '/js/widget-loader.js';

  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(scriptTag, s);
})();

Here's the HTML that's being output on my page:

<div id="hfc-embed-container" style="display: block;">
    <div style="" id="hfc-cleanslate" class="hfc-chat-container">
      <div class="chat-template">
        <div id="hfc-badge" class="hfc-default-minimized-view hfc-page hfc-badge clearfix hfc-badge-bottom" style="background-color: rgb(255, 255, 255);">
          <div class="hfc-proactive-notification">
            <div class="hfc-proactive-message">Hi! This is a test message!</div>
          </div>

          <img alt="" class="hfc-badge-icon" id="hfc-badge-icon" src="https://d1l7z5ofrj6ab8.cloudfront.net/visitor/images/floating-widget-circle.png">
          <h2 class="hfc-badge-title" style="color: rgb(0, 0, 0);">Leave us a message!</h2><span class="hfc-unread"></span>
        </div>
    </div>
  </div>
</div>

So, if the phrase "Leave us a message" exists in the output HTML, I want to set display to none for hfc-embed-container .

Is this something that's possible for me to do in Javascript or should I be trying to go a different route? Thanks for your time!

Answer 1

In your HTML, several of your elements have IDs that contain hyphens. While this is valid for class names, it's not for IDs. This code will find the correct elements and hide the right one, but notice I've changed the hfc-embed-container ID to hfcEmbedContainer in the HTML:

  <div id="hfcEmbedContainer" style="display: block;">

Then, AFTER the DOM is loaded, you can find the elements you need to interact with and hide the right one:

  if (document.querySelector(".hfc-badge-title").innerHTML.indexOf("Leave us a message") > -1) {
    document.getElementById("hfcEmbedContainer").style.display = "none";
  }

Again, the if statement above must only run AFTER the DOM is loaded , so the elements you want to interact with actually exist in the DOM. Assuming there is a button somewhere that activates the message dialog (called btnLeaveMessage ), you could move the code there:

  window.addEventListener("DOMContentLoaded", function(){
    document.getElementById("btnLeaveMessage").addEventListener("click",    
      function(){
        if (document.querySelector(".hfc-badge-title").innerHTML.indexOf("Leave us a message") > -1) {
           document.getElementById("hfcEmbedContainer").style.display = "none";
        }
      });

  });