클릭으로 html 항목을 화면에 표시 or 숨김

HTML로 표현한 아래 버튼을 클릭하면 id가 ㄱ, ㄴ 인 항목은 화면에 표시 (style="display: block")

id가 ㄷ,ㄹ,ㅁ,ㅂ 인 항목은 화면에서 숨겨짐 (style="display:none")

1. HTML

<button onclick="doDisplay0(['ㄱ','ㄴ'],['ㄷ','ㄹ','ㅁ','ㅂ'])">버튼</button>

2. JavaScript

function doDisplay0(var1, novar1) {
    let t1 = var1; 
    let f1 = novar1;

    for (let i = 0; i < t1.length; i++) {
        t = document.getElementById(t1[i]);
        t.style.display = 'block'
    }
    for (let i = 0; i < f1.length; i++) {
        f = document.getElementById(f1[i]);
        f.style.display = 'none';
    }
}

리스트 형식으로 받은 항목들을 변수 t1(보여질 항목들) f1(감춰질 항목들)에 넣고

for문을 사용해 style의 display 를 block 혹은 none으로 바꿔줌

 

------ 구현내용 ------

ㄱ

ㄴ

ㄷ

ㄹ

ㅁ

ㅂ