Javascript doesn't work in wordpress theme

Question

I'm running into a wired issue when try to use javascript customization in Wordpress theme - vatage

I tried use a Wordpress Plugins - Simple Custom CSS and JS, tried put code in header and footer, both don't work.

Tried to add below in 'function.php ' file, also doesn't work.

add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/js/custom.js', 
    array(), false, true);
}

I also tested put the code direct the page as below.

<script type="text/javascript">
    let product_title_id = document.querySelector("#product-title-id")
    let offer_welcome = document.getElementById("no-welcome")
    console.log(product_title_id.innerHTML)
    console.log(offer_welcome.innerHTML)
    if (product_title_id.innerHTML.includes("ltimate")) {
        console.log("Yes, it is included.")
        console.log(offer_welcome.innerHTML)
        document.querySelector(".word-offerswelcomme").style.setProperty("display", "none", "important")
        document.querySelector(".word-offerswelcomme").style.setProperty("visibility ", "hidden", "important")
        document.getElementById("no-welcome").style.display = "none";
        document.getElementById("no-welcome").innerHTML = "";


    }
    document.querySelector(".word-offerswelcomme").style.setProperty("display", "none", "important")
    document.getElementById("no-welcome").style.display = "none";
    document.getElementById("no-welcome").innerHTML = "";


</script>

In console, the console.log works. but the if statement and the last 3 calls don't work. the .style.display = "none" works 1 second when you refresh the page, then the content pop up again.

Anyone know how to resolve this issue. I am new for wordpress. Thanks in advance

Answer 1

Maybe works after complate document fully downloaded.

document.addEventListener("DOMContentLoaded", function() {
 let product_title_id = document.querySelector("#product-title-id")
 let offer_welcome = document.getElementById("no-welcome")
 console.log(product_title_id.innerHTML)
 console.log(offer_welcome.innerHTML)
 if (product_title_id.innerHTML.includes("ltimate")) {
    console.log("Yes, it is included.")
    console.log(offer_welcome.innerHTML)
    document.querySelector(".word-offerswelcomme").style.setProperty("display", "none", "important")
    document.querySelector(".word-offerswelcomme").style.setProperty("visibility ", "hidden", "important")
    document.getElementById("no-welcome").style.display = "none";
    document.getElementById("no-welcome").innerHTML = "";


 }
  document.querySelector(".word-offerswelcomme").style.setProperty("display", "none", "important")
  document.getElementById("no-welcome").style.display = "none";
  document.getElementById("no-welcome").innerHTML = "";

}