Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
Autumn, 01 Nov 2026 - @32.87
Forum Activity: Three Stars ~ Boop! The forum will close in 968.beats! Random | Recent Posts | Guild Recents
News: Love is not possession  :4u: Guild Events: Weekly zine jam 18: Never
Super News: ~~MelonLand's Halloween Profile Design Contest 2026~~
+  MelonLand Forum
|-+  Da Web Revival
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Changing color based on data attribute with Javascript

 « previous next »
Pages: [1] Print Embed
Author Topic: Changing color based on data attribute with Javascript  (Read 60 times)
Noah_S
Sr. Member ⚓︎
****
View Profile WWWArt


Noah. Earth. I make website. I.. I.. Noah. Earth.
⛺︎ My Room
iMood: Noah_S
RSS: RSS

Guild Memberships:
Artifacts:
Caught by RubbereonfunguyVisited on Melon's 10th Anniversary!I got robbed by Dan Q on Melonland!I met Dan Q on Melonland!A coin!
« on: Autumn, 31 Oct 2026 @804 » Toggle Font Embed
I have a JSIH (JavaScript Induced Headache). I'm trying to change the background color of all elements that have a custom data attribute. I've been trying with W3School to make the first 2 class=example red while leaving the third. It refuses to cooperate. Please help. I've been trying all day and the script keeps going "???" instead of "!!!".

Code
<!DOCTYPE html>
<html>
<body>
<h1>The Document Object</h1>
<h2>The querySelectorAll() Method</h2>

<h2 class="example" data-test="1">A heading</h2>
<p class="example" data-test="1">A paragraph.</p> 
<p class="example" data-test="2">A second paragraph.</p> 

<script>
const nodeList = document.querySelectorAll("data-test", "1");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}
</script>

</body>
</html>
Logged
perfectionist_better.gifweb_designer.gifspeed_of_time.gifbutton290.pngmy_dream_wedding.gifClippy beats AI
Artifact Swap: Christmas Easter. Or Easter Christmas?Fake penguinLarge watercraftGrowing ballwhen life gives you crab make mailMessage BuddylaptopYarn kitty
jayecifer
Newbie ⚓︎
*
View Profile WWW


No thanks...
⛺︎ My Room
OS: Win 11

Guild Memberships:
Artifacts:
Joined 2026!
« Reply #1 on: Autumn, 31 Oct 2026 @812 » Embed
The issue is querySelectorAll. It only takes one CSS selector STRING, not two separate arguments.

So instead of this: querySelectorAll("data-test", "1")

Do this:  querySelectorAll('[data-test="1"]')

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

data-test is an attribute selector.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors
« Last Edit: Autumn, 31 Oct 2026 @822 by jayecifer » Logged
Noah_S
Sr. Member ⚓︎
****
View Profile WWWArt


Noah. Earth. I make website. I.. I.. Noah. Earth.
⛺︎ My Room
iMood: Noah_S
RSS: RSS

Guild Memberships:
Artifacts:
Caught by RubbereonfunguyVisited on Melon's 10th Anniversary!I got robbed by Dan Q on Melonland!I met Dan Q on Melonland!A coin!
« Reply #2 on: Autumn, 31 Oct 2026 @820 » Toggle Font Embed
Thank you!
Logged
perfectionist_better.gifweb_designer.gifspeed_of_time.gifbutton290.pngmy_dream_wedding.gifClippy beats AI
Artifact Swap: Christmas Easter. Or Easter Christmas?Fake penguinLarge watercraftGrowing ballwhen life gives you crab make mailMessage BuddylaptopYarn kitty
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
@000 Melon
Land Forum Art Hub Chat Webring Everyone Site Explore Random Recent Tenement Arcade Want to Login or Join ? Guides Web Craft Guide Graphic Catalogue Wiki Help I'm Lost! Community Link Land Newsletters Image Stream Minecraft: Online

Forum Theme Picker

 Search Zap! Friendly Sites
Passport Sites tamaNOTchi Asatte Add your site?
Aero Archive Onio Cafe 32 Bit Cafe Status Cafe