+ 2

Variables/dynamic website with CSS ?

Hello, I've created a loading circle in CSS : https://code.sololearn.com/WPGKv4osXF81/?ref=app But I would like to improve the code. So I would like then we click on the center the color of the circle change. so I've created a Js script and then we click 3 variables (r g and b) change at first it's red so r=255 g=0 b=0 then it's green so r=0 g=255 b=0 and then the click a new time it's blue and it start again. the code and the next in an answer 1/2

css javascript variables dynamic

9th May 2017, 9:44 PM

Hbeo

4 Answers

+ 15

▶Do you want to change the background-color? You have no need of variables, create tre classes CSS: <style> .red {background: red !important;} .green {background: green !important;} .blue {background: blue !important;} </style> ▶Then, in your Javascript: <script> var circle = document.getElementById("circle"); // Toggle Effect circle.onclick = function() { if (this.className == "red") this.className = "green" else if (this.className == "green") this.className = "blue" else this.className = "red" } </script> ▶Finally, HTML should has the "red" class for this example: <body> <div id="border"> <div id="circle" class = "red"></div> </div> </body> When you click on the circle, the background-color first will be red, then green and then blue. You can change this classes as you want (for example, for replace the background-color with... whetever you want) Code complete: ⤵⤵⤵⤵⤵⤵⤵⤵ 〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰 <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="LoadingCircleCSS.css" /> </head> <style> .red {background: red !important;} .green {background: green !important;} .blue {background: blue !important;} </style> <body> <div id="border"> <div id="circle" class = "red"></div> </div> <script> var circle = document.getElementById("circle"); circle.onclick = function(){ if (this.className == "red") this.className = "green" else if (this.className == "green") this.className = "blue" else this.className = "red" } </script> </body> </html> 〰〰〰〰〰〰〰〰〰〰〰〰 - You can paste it in your HTML code -

9th May 2017, 10:19 PM

Maz

+ 15

Ups, sorry... in this case, this is the correct code to paste in your HTML: 〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰 <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="LoadingCircleCSS.css" /> </head> <style> .red {background: -webkit-linear-gradient(rgba(255,0,0,1), rgba(255,0,0,0)) !important;} .green {background: -webkit-linear-gradient(rgba(0,255,0,1), rgba(0,255,0,0)) !important;} .blue {background: -webkit-linear-gradient(rgba(0,0,255,1), rgba(0,0,255,0)) !important;} </style> <body> <div id="border" class = "red"> <div id="circle"></div> </div> <script> var border = document.getElementById("border"); border.onclick = function(){ if (this.className == "red") this.className = "green" else if (this.className == "green") this.className = "blue" else this.className = "red" } </script> </body> </html>

9th May 2017, 10:32 PM

Maz

+ 3

the code : <script> var z=0, r=255,g=0,b=0; var a=[255,0,0]; const c=[[255,0,0],[0,255,0],[0,0,255]]; function ChangeCouleur() { z=(z+1)%3; return c[z];} </script> <div id="border" style="background: -webkit-linear-gradient(rgba(r,g,b,1), rgba(r,g,b,0)); color:white;" >a <div id="circle" onclick="a=ChangeCouleur(); r=a[0]; g=a[1]; b=a[2];"></div> </div> but I can't assign the value on CSS. thanks to Google I've found that it's possible with module (or extension I don't know the name) or with using a special syntax https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables so I've test but without success 😢 So I would liken to know if it's possible to change the color with CSS (without using a module) or if I should use JS and in this case how ? thanks 😁 and sorry for the bad English... 2/2

9th May 2017, 9:51 PM

Hbeo

+ 3

thank you very much ! P.S. :it's not for the background but for the circle but I can modify the code

9th May 2017, 10:27 PM

Hbeo