<div id="cookie-consent-banner" class="cookie-consent-banner">
    <h3>Deze website maakt gebruik van cookies</h3>
    <p>Deze website gebruikt cookies om uw gebruikerservaring te verbeteren. Door onze website te gebruiken, stemt u in met alle cookies in overeenstemming met ons Cookiebeleid.</p>
    <button id="btn-accept-all" class="cookie-consent-button btn-success">Alles accepteren</button>
    <button id="btn-accept-some" class="cookie-consent-button btn-outline">selectie accepteren</button>
    <button id="btn-reject-all" class="cookie-consent-button btn-grayscale">Alles afwijzen</button>
    <div class="cookie-consent-options">
      <label><input id="consent-necessary" type="checkbox" value="Necessary" checked disabled>Noodzakelijk</label>
      <label><input id="consent-analytics" type="checkbox" value="Analytics" checked>Statistieken</label>
      <label><input id="consent-preferences" type="checkbox" value="Preferences" checked>Voorkeuren</label>
      <label><input id="consent-marketing" type="checkbox" value="Marketing">Marketing</label>
    </div>
</div>

I’ve placed the following code in my header.php:

	    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        
        if(localStorage.getItem('consentMode') === null){
            gtag('consent', 'default', {
                'ad_storage': 'denied',
                'analytics_storage': 'denied',
                'personalization_storage': 'denied',
                'functionality_storage': 'denied',
                'security_storage': 'denied',
            });
        } else {
            gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
        }
    </script>

And the following code in my functions.php

function enqueue_cookie_bar_script() {
    wp_enqueue_script('cookie-bar-script', get_template_directory_uri() . '/cookiebar2.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_cookie_bar_script', 15);

This is the cookiebar2.js file, which is executed. in the console I can see the ‘script started’ but somehow, it is not executing the ‘addEventListerners’ when clicking the buttons. When clicking a button it is closing the popup (so the jQuery part at the bottom is working) but the consent items aren’t updated. Does someone know why this isnt working? Hope someone can help me!

document.addEventListener('DOMContentLoaded', function () {
    console.log("script started");

    function hidePopup() {
        // document.getElementById('cookie-consent-banner').style.display = 'none';
        elementorProFrontend.modules.popup.closePopup({}, event)
    }

    document.getElementById('btn-accept-all').addEventListener('click', function () {
        console.log("btn clicked");
        setConsent({
            necessary: true,
            analytics: true,
            preferences: true,
            marketing: true
        });
        hidePopup();
    });

    document.getElementById('btn-accept-some').addEventListener('click', function () {
        setConsent({
            necessary: true,
            analytics: document.getElementById('consent-analytics').checked,
            preferences: document.getElementById('consent-preferences').checked,
            marketing: document.getElementById('consent-marketing').checked
        });
        hidePopup();
    });

    document.getElementById('btn-reject-all').addEventListener('click', function () {
        setConsent({
            necessary: false,
            analytics: false,
            preferences: false,
            marketing: false
        });
        hidePopup();
    });

    function setConsent(consent) {
        console.log("consent is going to be set");
        const consentMode = {
            'functionality_storage': consent.necessary ? 'granted' : 'denied',
            'security_storage': consent.necessary ? 'granted' : 'denied',
            'ad_storage': consent.marketing ? 'granted' : 'denied',
            'analytics_storage': consent.analytics ? 'granted' : 'denied',
            'personalization': consent.preferences ? 'granted' : 'denied',
        };
        gtag('consent', 'update', consentMode);
        localStorage.setItem('consentMode', JSON.stringify(consentMode));
    };

    jQuery(document).ready(function ($) {
        $(document).on('click', '.cookie-consent-button', function (event) {
            elementorProFrontend.modules.popup.closePopup({}, event);
        });
    });
});

What is supposed to be happen:

1. Show Popup A
2. Popup A button is clicked (would automatically close) or closed manually with top right “X”
3. Show Popup B
4. Popup B button is clicked (would automatically close) or closed manually with top right “X”
5. Repeat steps (Show Popup A)

What is happening: Popup A is showing, but clicks are not closing it and showing Popup B

Clicks needed: On Popup A: either the “close popup A and open popup B” button or the top right “X” close button

Thank you,

Adam

I have been using WP Super Cache for a while but i just realized it is affecting my AMP pages, leaving a warning on Google search console as “Custom JavaScript is not allowed in amp“.

I disabled the cache plugin and the pages are now fine. I love the cache and wished this error can be addressed.

Thanks

My pages have been affected by ‘Custom javascript and AMP component ‘script’ tag’ on Google. Can you please take a look at my site and help me with fixing it. Thanks

Issues:

1) A tag on this page requires an AMP component ‘script’ tag, which is missing.

2) Custom javascript is not allowed

I am obviously new to WordPress but from what little I have seen it does seem to constrain the user to set themes, plugins, etc. So, before trying to learn it more, it would be good to know if it’s amenable to my final goal of publishing an HTML canvas game. Thank you.

Added: To be a bit more specific: I would need a freehand on the game page itself to place the canvas, buttons etc., controlled with my own JavaScript.

There is a error while creating web stories i.e “Custom Javascript is not allowed” Can someone please help me out.

Best,
Jay

https://www.exactlly.com/blog/index.php/tag/team-building/?amp
https://www.exactlly.com/blog/index.php/tag/it-department/?amp
https://www.exactlly.com/blog/index.php/re-discovering-hrms-as-a-performance-review-software/
https://www.exactlly.com/blog/index.php/pros-cons-customized-hrms/
https://www.exactlly.com/blog/index.php/impact-of-gst-industrywise/

Total in 117 links I am facing this error.

<?php
function website_files(){
    wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', array(), '', true);
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_script( 'script-name', get_template_directory_uri());

}
add_action('wp_enqueue_scripts','website_files');
?>

and here is my style.css file:

#box {
    background-color: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
}

and here is the html in my index.php:

<?php
get_header();?>

<h1>Website Title</h1>
<div id = "box">

</div>

I’m basically just trying to have the javascript change the color of the div with the id “box” from blue to green. I tried to code this as a test to see if my javascript files would actually get loaded and they didn’t. not sure what I’m doing wrong here. could someone please help me?

“Search Console has identified that your site is affected by 1 AMP issues:
Top Errors

Errors can prevent your page or feature from appearing in Search results. The following errors were found on your site:

Custom JavaScript is not allowed.

We recommend that you fix these issues when possible to enable the best experience and coverage in Google Search.”

<input type="checkbox" name="group1[]" on="tap:AMP.setState({ crox: ((crox != '123') ? '123' : '123')}),croxform.submit" />
<input type="checkbox" name="group2[]" "tap:AMP.setState({ crox: ((crox != '{256') ? '256' : '256')}),croxform.submit" />

On each page, 100 of these checkboxes are generated and group ids belong to categories and crox ids are post ids. when a checkbox is selected the post id is sent to the croxform.

Now, before AMP, I was able to make sure that only 1 checkbox from a given group (either 1 or 2 or any other amount of groups) could be selected at any given time using the javascript code below
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

It’s a jquery script and i’m trying to use amp-script to apply the same method on an amp page. however, till now i have been unsuccessful on all my tries as I’ve gone through all the questions and answers on stackoverflow, google search. can someone help me out with the problem?
if anyone can think of a way, then is it possible to have on=”change:AMP.setState” to apply to this case?