wordpress 中显示/隐藏功能的自定义 JS 脚本代码

Question

我希望有人能帮助我。我们在带有视频的页面上嵌入了 hubspot 表单。我们希望用户在视频播放前填写表格。这是我的函数的 JS，但它不起作用。有人可以告诉我我做错了什么吗？这是该页面的链接

https://roomex.com/mental-health-on-the-move-supporting-travelling-workforce-video/

document.addEventListener("DOMContentLoaded", function() {
    console.log("Script loaded and DOM fully ready.");

    // Get references to the video section
    const videoSection = document.querySelector("#video"); // Adjust if necessary

    // Ensure the video section is hidden initially
    if (videoSection) {
        videoSection.style.display = "none";
        console.log("Video section is hidden initially.");
    } else {
        console.warn("Video section not found. Check the selector.");
    }

    // Function to handle form submission
    function handleFormSubmission() {
        // Logic to handle the form submission
        console.log("Form submitted. Showing video section.");
        if (videoSection) {
            videoSection.style.display = "block"; // Show video section on form submission
        }
    }

    // Setup MutationObserver to look for the form section
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList') {
                const formSection = document.querySelector("#hsForm_b0ad8602-729b-49d1-9832-ef5aeb374b77");
                if (formSection) {
                    console.log("Form section found:", formSection);

                    // Add event listener for form submission
                    const submitButton = formSection.querySelector("input[type='submit'], button[type='submit']");
                    if (submitButton) {
                        submitButton.addEventListener("click", function(event) {
                            event.preventDefault(); // Prevent default form submission
                            handleFormSubmission(); // Call the function to handle submission
                        });
                    } else {
                        console.warn("Submit button not found within the form section.");
                    }

                    // Stop observing once the form is found
                    observer.disconnect();
                } else {
                    console.warn("Form section not found yet.");
                }
            }
        });
    });

    // Start observing the document body for child nodes
    observer.observe(document.body, { childList: true, subtree: true });
    console.log("Observer started on document body.");
});

Answer 1

要使视频在表单提交后显示，请首先使用 videoSection.style.display = "none" 隐藏视频。然后，将提交事件侦听器附加到表单，仅在表单成功提交后才显示视频。