📂Programing

An Example of Element Appearing Upon Clicking a Specific Button in JavaScript

Showcase

show

Clicking the ‘shoW ' button above will reveal the save buttons below. The actual save buttons do not perform any special functions, so there is no need to click them.

Code

HTML

<button onclick="submitData()">show</button>

<div id="saveButtons" style="display: none;">
  <a href="data.csv" download><button type="button">💾</button></a>
  <a href="plot.html" download><button type="button">🖼️</button></a>
</div>

• onclick="submitData()": Sets the button to call the submitData() function when clicked.
• style="display: none;: Hides the element so it is not visible unless manipulated via JavaScript.

JavaScript

<script>
function submitData() {
    document.getElementById("saveButtons").style.display = "block";
}
</script>

• getElementById("saveButtons"): Selects the element with the ID “saveButtons” in the document.
• style.display = "block";: Changes the selected element’s CSS display property to “block” to make it appear on the screen.