[SOLVED] Manipulate CSS with Js

Question

This is the code-
https://code.sololearn.com/WBQGoJEHxS41/?ref=app
Here, when I change color, the color of all boxes change into blue. But when I create a new box, it has color red again. I want to do something so that all the future boxes will also have color blue when the color button is clicked.

Answer 1

Easiest way is to go for css variables.

Note: you might lose support for some old browser if you use css variables.

https://code.sololearn.com/WFalswl204TO/?ref=app

Answer 2

maybe this will help
instead of adding background in box class I made it in js create function and col(color) is a variable so its value changes to blue after changecolor is clicked

...https://code.sololearn.com/W7AqKlxn1p1n/?ref=app

Answer 3

Calviղ, thanks for the answer. But I think if I do that and click the create button first before clicking the color button, then also all the boxes will turn into blue though i haven't clicked the color button yet. I hope you understand what i mean... this is not the actual code I'm working upon, but i just want to change the property from css stylesheet and not the style property of the document element(s) particularly.

Answer 4

Bartika🎶 then just need to add conditional code

Answer 5

Run color() in create() function

Answer 6

i think you should create a loop that changes every second the boxes style depending on a variable which says if the boxes are red or blue

Answer 7

Add color() at the end of the create() function's code
So when you click create button color() will run too and all the boxes shall be blue
found better solution
just add this code at the end of the create function's
box.style.background ="blue"
and it will change just the added box
enjoy

Answer 8

Cc

Answer 9

X=3
num=17
print(num%3)