55 lines
2.0 KiB
JavaScript
55 lines
2.0 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const toggleCheckbox = document.querySelector('.toggleMainCheckbox');
|
||
|
|
const secMBSI_DSMPremiumSecMidCardsInside = document.querySelector('.secMBSI_DSMPremiumSecMidCardsInside');
|
||
|
|
|
||
|
|
if (!secMBSI_DSMPremiumSecMidCardsInside) {
|
||
|
|
console.error('secMBSI_DSMPremiumSecMidCardsInside not found');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const children = Array.from(secMBSI_DSMPremiumSecMidCardsInside.children);
|
||
|
|
if (children.length < 2) {
|
||
|
|
console.error('Not enough children in secMBSI_DSMPremiumSecMidCardsInside');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const secondChild = children[1];
|
||
|
|
const lastChild = children[children.length - 1];
|
||
|
|
|
||
|
|
function updateContent() {
|
||
|
|
const updateLastP = (card, h1Content, pContent) => {
|
||
|
|
const cardTop = card.querySelector('.secMBSI_DSMPremiumSecMidCardsCardTop');
|
||
|
|
const lastP = cardTop.querySelectorAll('p').length > 0 ? cardTop.querySelectorAll('p')[cardTop.querySelectorAll('p').length - 1] : null;
|
||
|
|
const h1 = cardTop.querySelector('h1');
|
||
|
|
|
||
|
|
if (h1) {
|
||
|
|
h1.innerHTML = h1Content;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (lastP) {
|
||
|
|
lastP.innerHTML = pContent;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (toggleCheckbox.checked) {
|
||
|
|
// Update second child
|
||
|
|
updateLastP(secondChild, '<span><strong>€300</strong></span>€250<span>%16 off</span>', '<span><strong>€25</strong></span>€20.83 per month for 12 months');
|
||
|
|
|
||
|
|
// Update last child
|
||
|
|
updateLastP(lastChild, '<span><strong>€180</strong></span>€150<span>%16 off</span>', '<span><strong>€15</strong></span>€12.5 per month for 12 months');
|
||
|
|
|
||
|
|
} else {
|
||
|
|
// Revert second child
|
||
|
|
updateLastP(secondChild, '€25', '€25 per month');
|
||
|
|
|
||
|
|
// Revert last child
|
||
|
|
updateLastP(lastChild, '€15', '€15 per month');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleCheckbox.addEventListener('change', updateContent);
|
||
|
|
|
||
|
|
// Initial update based on the current checkbox state
|
||
|
|
updateContent();
|
||
|
|
});
|