Elements missing on page after pasting video code

Sometimes, page elements may be missing after applying the video code due to conflicts with plugins, themes, or settings in WordPress.

This article offers guidelines and best practices to help you avoid common pitfalls when using WordPress, particularly with Elementor and URL parameters.

Best Practices

1. Use DOM Ready Events

Always wrap your JavaScript code in a DOMContentLoaded event listener to ensure that the DOM is fully loaded before your script runs. This prevents errors related to trying to access elements that are not yet available.

document.addEventListener("DOMContentLoaded", function() {  
    // Your code here  
});

2. Check for Element Existence

Before manipulating the DOM, check if the elements you want to interact with exist. This prevents errors when trying to access or modify non-existent elements.

const element = document.getElementById("yourElementId");  
if (element) {  
    // Safe to manipulate the element  
}  

3. Avoid Directly Modifying innerHTML

Instead of replacing innerHTML, consider using methods like createElement, appendChild, or insertAdjacentHTML to add or modify content. This preserves existing event listeners and improves performance.

const newElement = document.createElement("div");  
newElement.textContent = "New Content";  
document.body.appendChild(newElement);  

4. Handle URL Parameters Safely

When accessing URL parameters, always provide default values to avoid undefined errors. Use the URLSearchParams API to safely retrieve parameters.

const params = new URLSearchParams(window.location.search);  
const email = params.get("email") || ''; // Default to an empty string  

5. Use forEach for Iteration

When iterating over elements, use forEach instead of map if you do not need to transform the array. This clarifies your intent and avoids unnecessary array creation.

Array.from(document.getElementsByClassName("your-class")).forEach((item) => {  
    // Your logic here  
});  

6. Test Thoroughly

Always test your code with various URL parameters to ensure that it behaves as expected. Check for edge cases, such as missing parameters or unexpected values.

Demo Code

Here’s a simple demo code that incorporates the best practices discussed above. This code initializes a video player and safely handles URL parameters:

<div style="padding:56.25% 0 0 0;position:relative;">  
    <iframe class="reachout-player" frameborder="0" allow="fullscreen;" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="FRI Post Show"></iframe>  
</div>  
<script>  
    document.addEventListener("DOMContentLoaded", function() {  
        function reachoutInit() {  
            const prms = new URLSearchParams(window.location.search);  
            const params = Object.fromEntries(prms.entries());  

            // Replace placeholders in the body only if they exist  
            for (const [key, value] of prms) {  
                const placeholder = "{{" + key + "}}";  
                if (document.body.innerHTML.includes(placeholder)) {  
                    document.body.innerHTML = document.body.innerHTML.replace(placeholder, value);  
                }  
            }  

            const email = params.email || '';  
            const uuid = params.uuid || '';  
            const ctaButton = document.getElementById("ctaButton");  

            if (ctaButton) {  
                ctaButton.addEventListener("click", function() {  
                    // Example AJAX request  
                    const xhr = new XMLHttpRequest();  
                    xhr.open("POST", "https://example.com/api", true);  
                    xhr.setRequestHeader("Content-Type", "application/json");  
                    xhr.send(JSON.stringify({ email: email, uuid: uuid }));  
                });  
            }  
        }  

        reachoutInit();  
    });  
</script>  

Conclusion

By following these best practices and using the demo code as a reference, you can avoid common issues related to URL parameters and JavaScript execution on your site. Implementing these guidelines will lead to more robust, maintainable, and user-friendly web applications.

If you encounter any issues or have questions, please reach out to our support team for assistance.