I don’t even know how to describe this problem.
Let’s say that I have template in smarty with code (part) :
<div class="view-choice-container">
<span>Widok:</span>
<div class="choices-box">
<img data-choice="compact" src="media/build/img/compact-view.svg" alt="Widok kompaktowy" class="icon viewChoiceJs"/>
<img data-choice="normal-view" src="media/build/img/normal-view.svg" alt="Widok normalny" class="icon viewChoiceJs icon--active"/>
</div>
</div>
This is visible in html structure when the page renders.
Next I have js script like this :
export default () => {
// get all view choice elements by class viewChoiceJs
const choices = document.querySelectorAll('.viewChoiceJs');
// console.log(choices)
console.log(choices.length)
if (choices.length === 0) {
return;
}
choices.forEach(function (choice) {
// add event listener to each view choice element
choice.addEventListener('click', function () {
// get the view choice value
const viewChoice = this.getAttribute('data-choice');
// remove icon--active class from all view choice elements
choices.forEach(function (choice) {
choice.classList.remove('icon--active');
});
// add icon--active class to the clicked view choice element
this.classList.add('icon--active');
});
});
}
This script then is called by “mother” script like so:
import filtersPanel from "./components/filtersPanel";
import viewChoice from "./components/viewChoice";
import ulubioneButton from "./components/ulubioneButton";
window.addEventListener('load', () => {
console.log('Document loaded');
viewChoice();
ulubioneButton();
})
document.addEventListener('DOMContentLoaded', () => {
console.log('Document ready');
filtersPanel();
})
// window.onload = function () {
// console.log('Window loaded');
// viewChoice();
// ulubioneButton();
// }
I have tried to call it in these three different functions.
Then this Mother script is compiled by gulp and plugged to header along bunch of other scripts.
<head>
<script type="text/javascript" src="/media/build/js/main.min.js?v={$tmplWebVersion}"></script>
</head>
Now the problem is that this script should always console log number 2 because I have 2 imgs with class viewChoiceJs but the outcome is that when I restart PC, on the first load I get 2 and any other refresh after it always returns 0…
What’s funnier is that for my colleague on his Opera browser it always works, but for his Firefox the behaviour is the same, first load 2 then any other 0.
I also opened chrome on the server and 6 out of 10 loads were succesfull.
On my mobile phone every 2nd load is succesfull…
What am I doing wrong ? Is it browser issue ? Is it somehow script loading “moment” issue ? Am I Plugging it in the wrong place ? Maybe there’s other function that checks if everything is loaded and only then runs script ?
I’m doing exactly the same for arrows for filters (atleast it appears that way) :
export default () => {
document.querySelectorAll('.filter-arrow-icon').forEach(function (arrowIcon) {
arrowIcon.addEventListener('click', function () {
const filterBox = this.closest('.filter-inner').querySelector('.filter-box');
if (filterBox) {
filterBox.classList.toggle('hidden');
this.classList.toggle('rotate-svg');
}
});
});
}
And this works everytime without problems.