HTML DOM Problem

Question

hi
i have an svg circle and i want <p> element next to it have same color as circle
so i wrote this code but i don't know what i should do to make it work correctly.

https://code.sololearn.com/WLxSDnNYYO0C

tnx for any help

Answer 1

Use the same id selector more then once in the same doc can be done, but it's wrong way to do it.
Id selector must be unique, if need repeated selector, you should use class selector.

If you use id selector more then once, the JavaScript function document.getElementById basically have no effect on the id selector you put.

Answer 2

p need to be inline block display
svg cannot be 100%
Css id cannot be used for multiple times, use class instead

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

Answer 3

@Klaus
I don't quite understand your message.
Do you mean you can use #Price-Box for multiple times in Html doc as long as you write the Css in .Pack2 #Price-Box format??

If this is actually what you mean, I dont think your statement is correct.

Answer 4

You have made an extra index count
Change it to:

for (i=0;i<PA;i++){

}

Answer 5

u can use id multiple times in case that we write the id this way:
.Pack2 #Price-Box {
rules here
}

and btw what is this code u wrote?
i need help in JS!

Answer 6

this can be done.

my question is about how should i make the for loop change color of all the p elements

i want the for loop number all pack2 classes [0] till [ i ] and selects from first one till last one

btw excuse me for my bad English 😀🌷

Answer 7

you are right.
this can be done in css but it would cause me problem in JS and DOM.

i tried it with class names and a little edit and i got the result i want

new code: https://code.sololearn.com/W6B3NLI22Gsh

but console gives me this error:

Uncaught TypeError: Cannot read property 'getAttribute' of undefined
Line: 4

what's the problem this time?

Answer 8

tnQ a lot for your helps
btw i challenged u in JS :)