I'm currently working on a project where I want to toggle the background color from RGB to a solid color. My approach involves using Change inner HTML to switch the background color, but I've been facing some difficulties in getting it to work correctly. Since I'm relatively new to using the change inner HTML method, I might be missing something crucial. Here's what I have so far:
Below is my current code snippet for the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;">
<div id="toggle">
<div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>
</div>
</body>
</html>
Here's the corresponding CSS code:
.wrapper {
margin:0px;
height: 200%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(
124deg,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3
);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
@-webkit-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@-moz-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@-o-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
Lastly, here's the JavaScript code that I've implemented:
let rgb;
function tog(){
if(rgb = <div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>){
toggle.innerHTML = <button onclick="tog()">Toggle</button>;
}else{
toggle.innerHTML = <div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>;
}
}