Я пытаюсь кодировать сайт, где мне нужно изменить фон с помощью кнопки, но я не могу ...
Я создал кнопку, которая меняет цвет фона при нажатии кнопки.кнопка, но после того, как я добавил изображение в качестве фона, оно не хочет менять цвет фона (очевидно) ...
<head>
<style>
:root{
--main-bg: url(https://www.the url of my bg.jpg);
}
</style> // creating a variable for the bg of my site
<style>
body {
background: var(--main-bg) repeat-x;
}
</style> // using this variable
<script>
var colors = ["#2d2d2d", "#f2f2f2"];
var colorIndex = 0;
function changeColor() {
var col = document.getElementById("body");
if( colorIndex >= colors.length ) {
colorIndex = 0;
}
col.style.backgroundColor = colors[colorIndex];
colorIndex++;
// the js script to change the bg color
}
</script>
<script>
function backgroundHiding() {
let root = document.documentElement;
root.addEventListener("onclick", e => {
if (--main-bg) = "#2d2d2d" {
root.style.setProperty('--main-bg', " url(https://www.the urlof my bg.jpg)")
} else {
root.style.setProperty('--main-bg', "#2d2d2d")
}
// the js script to hide my img bg
}
</script>
<div class="button">
<body id='body'>
<button onclick="changeColor(); backgroundHiding();" class="lightbutton"><span>Turn On/Off the lights</span> </button>
</div> // creating the button that interact with the two js functions
</head>
Я ожидал, что это работает, но ... да ... нетЭто работает иногда, например, 1 раз в 100 раз, я не знаю почему ... Если бы кто-то мог мне помочь, я был бы очень признателен!
https://stackblitz.com/edit/typescript-ppvsvl?embed=1&file=index.html