📂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.