0

So I have a main canvas with three canvases on it. and a text.

<canvas id="Background" width="350" height="300"
style="border:6px solid black; position: absolute; left: 10px; top: 10px;">
</canvas>

<canvas id="Canvas1" width="150" height="100"
style="border:6px solid blue; position: absolute; left: 33px; top: 20px;">
</canvas>

<canvas id="Canvas1" width="50" height="50"
style="border:6px solid yellow; position: absolute; left: 33px; top: 200px;">
</canvas>

<canvas id="Canvas1" width="150" height="100"
style="border:6px solid blue; position: absolute; left: 33px; top: 20px;">
</canvas>

<canvas id="Canvas1" width="150" height="100"
style="border:6px solid blue; position: absolute; left: 243px; top: 20px;">
</canvas>

</div>
<div style="position: absolute; left: 70px; top: 50px;">
<p> example </p>
</div>

Later ill be adding onclick event and when I click, I want the text and one of the canvases to disappear. Basically I want to know how to show/hide items in this code. Thank you!

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Nick Dangerous
  • 31
  • 3
  • 1
    Id should be unique, and I guess your question is probably duplicated but this should help you: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp – Andus Jan 17 '20 at 02:55
  • It's worth noting that you cannot have multiple elements with the same ID in the DOM. – ibex Jan 17 '20 at 03:24
  • I don't know why it says my question is duplicated but yes thanks, I'll use that link as reference to it! – Nick Dangerous Jan 17 '20 at 03:46

2 Answers2

2

Use either display: none or visibility: hidden. The difference is that display: none completely removes the item from view, while visibility: hidden preserves the empty space where the element would have been. Which is appropriate depends on your use case.

JS looks roughly like document.getElementById("Canvas1").style.display = "none";

see sharper
  • 11,505
  • 8
  • 46
  • 65
1

You can use css properties visibility or display to achieve this. In your code if you want to hide the text, just give text div an id of text like this:

<div style="position: absolute; left: 70px; top: 50px;" id="text">
  <p> example </p>
</div>

and define a function in your script file or tag like this:

function hideElement () {
  document.getElementById('text').style.display = 'none'

  // For Canvas1

 document.getElementById('Canvas1').style.display = 'none'
}

hideElement()
Nipun Jain
  • 999
  • 6
  • 13