CODEWITHSUNDEEP
javascriptwordpress
melaniemueller.design
melaniemueller.design

Reputation: 57

window. onload=function() just works without cached DOM

The product image is displayed as inline SVG and receives a new color for specific paths, depending on the dropdown selection.

"use strict";
window.onload=function(){

var dropdownColor = document.getElementById('Color');

// When a new <option> is selected
dropdownColor.addEventListener('change', function() {
var selectPathSvg = document.getElementById('pathNumber');

//get value text
var colorValue= selectElemFerse.options[selectElemFerse.selectedIndex].text;

//Clear all Classes from SVGPath
selectPathSvg .classList = '';

// Add that class to the <p>
selectPathSvg.classList.add(colorValue);
})
}

But this Javascript code works only, if the page was read in the DOM for the first time. If you reload this page with F5, this will not lead to any errors in the console, but not to the desired result.

EDIT: Nothing here worked for me. But I noticed that if I delete the `woocommerce_recently_viewed``cookie, that the systems works fine. But how to fix such a thing?

Upvotes: 0

Views: 1596

Answers (2)

nick zoum
nick zoum

Reputation: 7295

It's generally bad practice to use onload = ...
You should instead try using addEventListner("load", ...)

The reason your script does not run, is because it gets compiled after the page has been fully loaded, so you should also check if the load event has already been fired.

"use strict";

if(document.readyState === "complete") onLoad();
else addEventListener("DOMContentLoaded", onLoad);

function onLoad(){
 console.log("Doing on load stuff here...");
}

Upvotes: 1

Ali_k
Ali_k

Reputation: 1661

Try this instead and see if it works:

window.addEventListener('DOMContentLoaded', (event) => {
    var dropdownColor = document.getElementById('Color');

    // When a new <option> is selected
    dropdownColor.addEventListener('change', function() {
        var selectPathSvg = document.getElementById('pathNumber');

        //get value text
        var colorValue= selectElemFerse.options[selectElemFerse.selectedIndex].text;

        //Clear all Classes from SVGPath
        selectPathSvg .classList = '';

        // Add that class to the <p>
        selectPathSvg.classList.add(colorValue);
    })
});

Upvotes: 0

Related Questions