Hi! I have this code which displays different content in a container depending on what's clicked. The code is here:
const containers = ['#flexibility', '#quality', '#commitment', '#time'];
const containerColors = [{
bgOriginal: '#3B662E',
bgOriginalRGB: 'rgb(59, 102, 46)',
bgHover: '#69995B',
bgClicked: '#A5CC98',
textClicked: '#18330F'
},
{
bgOriginal: '#45328C',
bgOriginalRGB: 'rgb(69, 50, 140)',
bgHover: '#7160B3',
bgClicked: '#A99CD9',
textClicked: '#241266'
},
{
bgOriginal: '#46701C',
bgOriginalRGB: 'rgb(70, 112, 28)',
bgHover: '#729E47',
bgClicked: '#A8CC85',
textClicked: '#234203'
},
{
bgOriginal: '#57238C',
bgOriginalRGB: 'rgb(87, 35, 140)',
bgHover: '#8354B3',
bgClicked: '#B693D9',
textClicked: '#350466'
}
]
const textData = ["Yes! It\'s not as straight forward as \"Do it once, and it\'s done!\". We wish it were, though!\n That\'s why, at Excelirate, you can request modifications! In fact, your first modification request is free of charge!", "What keeps clients coming back to you? It\'s the quality of your service!\nIt's quality that will keep you coming back to Excelirate for more. For quality is an important pillar in the services!", "Perhaps what\'s most important to Excelirate is commitment. Commitment to the agreement between us; Commitment to the work; Commitment to delivery.\nMore importantly, it\'s commitment to helping you realise your vision that'll let you sleep at night once you hand your request in! ", "\"The problem is, we think we have time\". The more time we lose, the more opportunities that slip our hands!\nThat\'s why any plan revolves around how we can make the best use of time. Once we agree upon a timeline, there\'s no going back!"]
const containerList = containers.map((containerName) => {
const containerObject = {
containerSelector: containerName,
headerSelector: `${containerName}Heading`,
bgColor: $w(containerName).style.backgroundColor, //here is the problem line 47
brColor: $w(containerName).style.borderColor
}
return containerObject;
});
function clickHandler(containerName) {
if (!$w('#displayPlaceholderHeader').hidden) {
$w('#displayPlaceholderHeader').hide('fade',{duration:250});
}
if (!$w('#displayPlaceholderSubheader').hidden) {
$w('#displayPlaceholderSubheader').hide('fade',{duration:250});
}
let cIndex = containers.indexOf(containerName);
const remainingContainers = containerList.filter((container) => container.containerSelector !== containerName);
$w(containerList[cIndex].containerSelector).style.backgroundColor = containerColors[cIndex].bgClicked;
$w(containerList[cIndex].containerSelector).style.borderColor = containerColors[cIndex].bgOriginal;
$w("#displayText").text = textData[cIndex];
$w('#displayHeading').text = $w(containerList[cIndex].headerSelector).text;
$w(containerList[cIndex].headerSelector).html = `<h4 style="text-align:center;font-size:40px"><span style="color:${containerColors[cIndex].textClicked};"><span style="font-family:wfont_3f983a_75d9900a54374c43ac2c2662c6895f24,wf_75d9900a54374c43ac2c2662c,orig_nunito_semibold">${$w(containerList[cIndex].headerSelector).text}</span></span></h4>`;
if ($w("#displayHeading").hidden) {
$w("#displayHeading").show('fade',{duration:250,delay:250});
$w("#displayText").show('fade',{duration:250,delay:250});
}
$w('#display').style.backgroundColor = containerList[cIndex].bgColor;
$w('#display').style.borderColor = containerList[cIndex].brColor;
for (let container of remainingContainers) {
if ($w(container.containerSelector).style.backgroundColor !== container.bgColor) {
$w(container.containerSelector).style.backgroundColor = container.bgColor;
$w(container.containerSelector).style.borderColor = container.brColor;
$w(container.headerSelector).html = `<h4 style="text-align:center;font-size:40px"><span style="color:#FAFAFA;"><span style="font-family:wfont_3f983a_75d9900a54374c43ac2c2662c6895f24,wf_75d9900a54374c43ac2c2662c,orig_nunito_semibold">${$w(container.headerSelector).text}</span></span></h4>`;
}
}
$w('#headerTop').show('fade', { duration: 250,delay:500 });
return containerName;
}
function colorChange(container, originalColor, originalColorRGB, colorIfOriginal, colorIfNotOriginal) {
if ($w(container).style.backgroundColor === originalColor || $w(container).style.backgroundColor === originalColorRGB)
$w(container).style.backgroundColor = colorIfOriginal;
else
$w(container).style.backgroundColor = colorIfNotOriginal;
}
function mouseInHandler(containerName) {
let cIndex = containers.indexOf(containerName);
const colors = containerColors[cIndex];
colorChange(containerName, colors.bgOriginal, colors.bgOriginalRGB, colors.bgHover, colors.bgClicked);
}
function mouseOutHandler(containerName) {
let cIndex = containers.indexOf(containerName);
const colors = containerColors[cIndex];
colorChange(containerName, colors.bgHover, '', colors.bgOriginal, colors.bgClicked);
}
$w.onReady(function () {
let clickedContainer = '';
const displayArea = {
header: '#displayPlaceholderHeader',
subHeader: 'displayPlaceholderSubheader',
container: '#display',
bgColor: $w('#display').style.backgroundColor,
brColor: $w('#display').style.borderColor
};
$w('#quality').onMouseIn(() => {
mouseInHandler('#quality');
})
$w('#quality').onMouseOut(() => {
mouseOutHandler('#quality');
})
$w('#quality').onClick(() => {
clickedContainer = clickHandler('#quality');
});
$w('#flexibility').onMouseIn(() => {
mouseInHandler('#flexibility');
})
$w('#flexibility').onMouseOut(() => {
mouseOutHandler('#flexibility');
})
$w('#flexibility').onClick(() => {
clickedContainer = clickHandler('#flexibility');
});
$w('#time').onMouseIn(() => {
mouseInHandler('#time');
})
$w('#time').onMouseOut(() => {
mouseOutHandler('#time');
})
$w('#time').onClick(() => {
clickedContainer = clickHandler('#time');
})
$w('#commitment').onMouseIn(() => {
mouseInHandler('#commitment');
})
$w('#commitment').onMouseOut(() => {
mouseOutHandler('#commitment');
})
$w('#commitment').onClick(() => {
clickedContainer = clickHandler('#commitment');
})
$w('#display').onMouseIn(() => {
if (clickedContainer) {
let cIndex = containers.indexOf(clickedContainer);
$w('#display').style.backgroundColor = containerColors[cIndex].bgHover;
if($w('#clickText').hidden)
$w('#clickText').show();
}
});
$w('#display').onMouseOut(() => {
if (clickedContainer) {
let cIndex = containers.indexOf(clickedContainer);
if ($w('#display').style.backgroundColor === containerColors[cIndex].bgHover)
$w('#display').style.backgroundColor = containerColors[cIndex].bgOriginal;
if(!$w('#clickText').hidden)
$w('#clickText').hide();
}
});
$w('#display').onClick(() => {
if (clickedContainer) {
clickedContainer = '';
$w('#display').style.backgroundColor = displayArea.bgColor;
$w('#display').style.borderColor = displayArea.brColor;
if (!$w('#displayHeading').hidden)
$w('#displayHeading').hide('fade', { duration: 250 });
if (!$w('#displayText').hidden)
$w('#displayText').hide('fade', { duration: 250 });
if ($w('#displayPlaceholderHeader').hidden)
$w('#displayPlaceholderHeader').show('fade', { duration: 250 });
if ($w('#displayPlaceholderSubheader').hidden)
$w('#displayPlaceholderSubheader').show('fade', { duration: 250 });
if (!$w('#headerTop').hidden)
$w('#headerTop').hide('fade', { duration: 250 });
for (let container of containerList) {
if ($w(container.containerSelector).style.backgroundColor !== container.bgColor) {
$w(container.containerSelector).style.backgroundColor = container.bgColor;
$w(container.containerSelector).style.borderColor = container.brColor;
$w(container.headerSelector).html = `<h4 style="text-align:center;font-size:40px"><span style="color:#FAFAFA;"><span style="font-family:wfont_3f983a_75d9900a54374c43ac2c2662c6895f24,wf_75d9900a54374c43ac2c2662c,orig_nunito_semibold">${$w(container.headerSelector).text}</span></span></h4>`;
}
}
if(!$w('#clickText').hidden)
$w('#clickText').hide();
}
})
})
Everything works perfectly fine in preview. But when the site is published, I get this error in the console:
It’s caught with a TypeError - for some reason the browser doesn’t recognise the containers selected using $w
Please help