📂프로그래밍

자바스크립트에서 특정 버튼을 클릭해야 요소가 나타나는 예제

쇼케이스

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

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

• getElementById("saveButtons"): 문서에서 ID가 “saveButtons"인 요소를 선택한다.
• style.display = "block";: 선택한 요소의 CSS display 속성을 “block"으로 변경하여 화면에 나타나게 한다.