John Davidson

Message:

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

---

My Answer:
It seems like the issue might be related to the timing of when your JavaScript code is being executed. Since you mentioned that the console.log statements are working but the styling changes are not persisting, it could be that the JavaScript code is being executed before the elements you are trying to target are fully loaded on the page.

One way to ensure that your JavaScript code is executed after the page has fully loaded is to wrap your code in a document ready function. You can do this by using jQuery's document ready function like this:

javascript
jQuery(document).ready(function($) {
// Your JavaScript code here
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);
// Rest of your code...
});


By wrapping your code in the document ready function, you can ensure that your JavaScript code is executed after the DOM has fully loaded, allowing you to target the elements on the page successfully.

Additionally, make sure that the IDs you are targeting in your JavaScript code (`#product-title-id` and `#no-welcome`) actually exist on the page. If the IDs are dynamically generated or loaded after the initial page load, you may need to use event delegation or other techniques to ensure that your JavaScript code can target those elements correctly.

I hope this helps resolve the issue you are facing with your JavaScript code in your WordPress theme. Let me know if you have any other questions.