Hey guys,
I'm very new to html on wix and I encountered this one issue when trying to create dark mode on my website. I got it working last night but when I launched it today it showed me a typeerror. Below attached it the error message and my code, can someone enlighten me what is going on here and how do i fix it? Thanks!
I got this code off a tutorial about making dark mode on corvid.
import { local } from 'wix-storage';
const pageElements = {
textElements: [],
boxContainers: [],
buttons: [],
repeater: []
}
let darkMode = {
textElementFontColor: "white",
boxContainersBackgroundColor: "#333333",
buttonsColor: "white",
repeaterColor: "white"
}
let defaultScheme = {
defaultTextElementsHtml: [],
boxContainersBackgroundColor: [],
buttonsColor: [],
repeaterColor: []
}
$w.onReady(function () {
saveDefaultColorScheme();
checkDarkMode();
addEventListenerToDarkmodeSwitch()
});
function saveDefaultColorScheme() {
pageElements.textElements = $w("Text");
pageElements.boxContainers = $w("Box");
pageElements.buttons = $w("Button");
pageElements.repeater = $w("Repeater");
pageElements.textElements.forEach(textElement => {
defaultScheme.defaultTextElementsHtml.push(textElement.html);
});
pageElements.boxContainers.forEach(boxContainer => {
defaultScheme.boxContainersBackgroundColor.push(boxContainer.style.backgroundColor);
});
pageElements.buttons.forEach(button => {
defaultScheme.buttonsColor.push(button.style.color);
});
pageElements.repeater.forEach(repeater => {
defaultScheme.repeaterColor.push(repeater.style.backgroundcolor);
});
}
function checkDarkMode() {
darkMode.enabled = JSON.parse(local.getItem('darkmodeEnabled'));
if (darkMode.enabled === true) {
switchToDarkMode();
$w("#switch1").checked = true;
} else {
switchToDefault();
$w("#switch1").checked = false;
}
}
function addEventListenerToDarkmodeSwitch() {
$w("#switch1").onChange((event) => {
if (darkMode.enabled) {
switchToDefault();
} else {
switchToDarkMode();
}
})
}
function switchToDarkMode() {
darkMode.enabled = true;
local.setItem('darkmodeEnabled', true);
$w("#text10").text = "Click to disable dark mode";
const htmlTagCleanerRegex = /<[^>]*>?/gm;
pageElements.textElements.forEach(textElement => {
let text = textElement.html.replace(htmlTagCleanerRegex, '')
$w(`#${textElement.id}`).html = textElement.html.replace(text, `<span style=color:${darkMode.textElementFontColor}>${text}</span>`)
});
pageElements.boxContainers.forEach(boxElement => {
$w(`#${boxElement.id}`).style.backgroundColor = darkMode.boxContainersBackgroundColor
});
pageElements.buttons.forEach(buttonElement => {
$w(`#${buttonElement.id}`).style.color = darkMode.buttonsColor;
});
pageElements.repeater.forEach(repeaterElement => {
$w(`#${repeaterElement.id}`).style.color = darkMode.repeaterColor;
});
}
function switchToDefault() {
darkMode.enabled = false;
local.setItem('darkmodeEnabled', false);
$w("#text10").text = "Click to enable dark mode";
pageElements.textElements.forEach((textElement, index) => {
$w(`#${textElement.id}`).html = textElement.html.replace(textElement.html, defaultScheme.defaultTextElementsHtml[index])
});
pageElements.boxContainers.forEach((boxElement, index) => {
$w(`#${boxElement.id}`).style.backgroundColor = defaultScheme.boxContainersBackgroundColor[index];
});
pageElements.buttons.forEach((buttonElement, index) => {
$w(`#${buttonElement.id}`).style.color = defaultScheme.buttonsColor[index];
});
pageElements.repeater.forEach((repeaterElement, index) =>{
$w(`#${repeaterElement.id}`).style.color = defaultScheme.repeaterColor[index];
});
}
top of page
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
To see this working, head to your live site.
TypeError: i is not a function
TypeError: i is not a function
1 comment
Like
1 Comment
Commenting has been turned off.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
bottom of page
You realize that that's about 100 lines of code? Unformatted, not in a code block - very hard to read.
Please read the community guidelines and repost your question. Try simplifying the code, and then you might even be able to catch the problem yourself.