Ask coding questions

← Back to all posts
Help with JavaScript
h
cuber1515 (91)

I need help

So I'm not that great at JS, but I can do simple things like:

function demo() {
  document.getElementById("demo").style.color = "blue";
}

But what if I want it to change multiple things like color: blue; background-color: black

I tried:

function demo() {
  document.getElementById("demo").style.color = "blue";
  document.getElementById("demo").style.backgroundColor = "black";
}

But it just does the bottom one.

Help please!

Answered by codingjlu (484) [earned 5 cycles]
View Answer
Comments
hotnewtop
codingjlu (484)

Please show some more code... preferably your entire HTML (include the head).

cuber1515 (91)

@codingjlu I'll just send you the spotlight page for what I'm working on (don't worry it's pretty short right now). Note: all of the comments in script.js are things I attempted, but didn't work, I'm keeping them till I find something that works. here it is => https://replit.com/@cuber1515/Happy-Birthday-template?v=1

codingjlu (484)

@cuber1515 put the script.js right before the end of the body tag and try again...

cuber1515 (91)

@codingjlu ok I tried that, it didn't work, but the problem is that it does the last one only, so like out of coverId.style.transform = "rotateY(180deg)";, coverId.styl.visibility = "hidden";, and coverId.style.display = "block"; it does the last and anything that has a different id in that function works too. It's like you can't have multiple statements for one id.

codingjlu (484)

@cuber1515 coverId.styl.visibility = "hidden"; should be coverId.style.visibility = "hidden";

codingjlu (484)

@cuber1515 lol you said that too late I'm back and available

codingjlu (484)

@cuber1515 hey could you make a copy of your current repl and share it with me so I can edit + experiment with the code?

ShluffyMonster (4)

try:
var demoId = document.getElementById("demo"); function demo(){ demoId.style.color = "blue"; demoId.style.backgroundColor = "black"; }
I haven't tested this and don't have a place to test this, but it may work

SixBeeps (5347)

Full context is needed. If this is the entire JS file:

1.) You didn't put a closing bracket to close demo()
2.) The third line shouldn't have a normal colon at the end, just a semicolon if wanted
3.) You can stick the result of document.getElementById("demo") into a variable and use that instead of calling it twice.

cuber1515 (91)

@SixBeeps Sorry about the errors, I fixed them. And in the 3rd one do you mean I need to do something like this:

const Demo = ["styl.color = "blue"", "style.backgroundColor = "black""];
function demo() {
  document.getElementById("demo").Demo;
}
codingjlu (484)

@cuber1515 he means:

const el = document.getElementById("demo");
el.style.color = "blue";
el.style.backgroundColor = "black";
ShluffyMonster (4)

@codingjlu I think it works fine with var or let. See https://Shluffy.github.io/notrickroll.html, although the embed doesn't work, ignore that, and the github repo at https://github.com/shluffy/shluffy.github.io/blob/master/notrickroll.html. it uses regular variables

codingjlu (484)

@ShluffyMonster it does work with var and let; but var is bad practice (ever since they had let) so try to avoid var...

cuber1515 (91)

@codingjlu & @ShluffyMonster wait, actually this doesn't work though. I still only does the last one.