Ask coding questions

← Back to all posts
How can I clear/hide elements when a button is clicked, then make something else appear?
DracoMagnus (0)

How do I do this successfully?

Comments
hotnewtop
DracoMagnus (0)

W3Schools says,

HTML

<button onclick="functionName()">Click Me</button>

<div id="myDIV"> 
 This is my DIV element.
</div>

JavaScript

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Would the "myDIV" be the div the button is inside? I understand the variable x, but how can I do this with 3 buttons, and when you click 1, it hides all three and makes a randomly chosen string(aka the question) appear with the four answer choices(or a text input, whichever is easier)?

Bookie0 (6149)

@DracoMagnus You could make several buttons and each button has an onclick with that function, and an id that will make it hide. Then for a randomly chosen string, you can use JS to randomly pick a string out of an array.

DracoMagnus (0)

Yes, I know about arrays, but what is that code I need to write, @Bookie0 ? Also, I have 3 buttons and each one needs to hide all three but they are all in separate divs.

Bookie0 (6149)

hmm okay well try first with just one button and one div (so use the code from W3 schools). Then, you could try to add the 2 other buttons, and each button, when they're clicked, will call the JS function.

@DracoMagnus

Bookie0 (6149)

Check this W3 schools page out, which explains how to hide elements when a button is clicked, and show something when the button is clicked again.

Good luck! :D

DracoMagnus (0)

Okay so here's my problem, @Bookie0. I use W3 schools regularly but the way they format that confuses me. Could you help me understand it? Here, I'll write out the function in a new comment.

Bookie0 (6149)

@DracoMagnus What's confusing about it? Click try yourself here to have all the code.

DracoMagnus (0)

Did you read the things in parentheses and the text at the bottom, @Bookie0?

Bookie0 (6149)

@DracoMagnus Uhh what things in parantheses? Can you show me what you're talking about? Thanks!

Coder100 (17467)

Using js, you can do something like this:

document.querySelector("element to hide").style.display = "none";
document.querySelector("element to show").style.display = "block";
DracoMagnus (0)

will it reset when the page is refreshed, @Coder100? also there's 3 different buttons you can hit, I would like each to work correctly.

Coder100 (17467)

It will reset.
Maybe consider using links to different sites @DracoMagnus

DracoMagnus (0)

what do you mean "different sites" @Coder100

Coder100 (17467)

Like a link to a new html page @DracoMagnus

DracoMagnus (0)

uhh, well this if for a school project, @Coder100. I'm trying to make a quiz page with JS arrays where it picks a random string(question) from the array and displays it and four options... but I need difficulty levels, too I think

DracoMagnus (0)

any tips on how to do that, @Coder100?