📂プログラミング

JavaScriptで特定のボタンをクリックすると要素が表示される例

ショーケース

show

上の ‘show’ ボタンをクリックすると、下の保存ボタンが表示される。実際の保存ボタンは特に機能しないので、クリックする必要はない。

コード

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()": ボタンがクリックされたときに submitData() 関数を呼び出すよう設定する。
• style="display: none;: JavaScript を用いた操作がない限り、その要素が見えないように隠しておく役割をする。

javascript

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

• getElementById("saveButtons"): ドキュメントから ID が “saveButtons” の要素を選択する。
• style.display = "block";: 選択した要素の CSS display プロパティを “block” に変更して画面に表示させる。