코드 길이를 줄일수있을까요?

3 글 보임 - 1 에서 3 까지 (총 3 중에서)

글쓴이

글

2023년 1월 1일 19:09 #60443

참가자


구현하고자하는 웹페이지는 위와 같습니다. 



그래서 위와 같은 코드를 작성했고 의도대로 웹페이지가 작동함을 확인했는데
코드 길이를 줄일려고 했는데 실패했습니다. 혹시 여기서 더 줄일 수 있는 방법이 있을까요?

코드 텍스트 복붙은 아래와 같습니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="button">
        <button onclick="알림창ID()">아이디</button>
        <button onclick="알림창PW()">비밀번호</button>
    </div>
    <div class="alert-box" id="alert">
        <p id="title">알림창</p>
        <button onclick="알림창닫기('none');">닫기</button>
    </div>

    <script>   
        function 알림창ID(구멍){
            document.getElementById('button').style.display='none';
            document.getElementById('title').innerHTML= '아이디입력해주세요';
            document.getElementById('alert').style.display='block';
        }
        function 알림창PW(구멍){
            document.getElementById('button').style.display='none';
            document.getElementById('title').innerHTML= '비번입력해주세요';
            document.getElementById('alert').style.display='block';
        }
        function 알림창닫기(구멍){
            document.getElementById('alert').style.display=구멍;
            document.getElementById('button').style.display='block';
        }
    </script>

</body>
</html>

2023년 1월 1일 20:33 #60451

codingapple

키 마스터

위의 함수 2개는 단어하나만 다르고 똑같아보이는데 파라미터 이용해서 하나로 합쳐봅시다

2023년 1월 2일 10:43 #60531

이순민

참가자

감사합니다 아래와같이 변경했습니다. 어제는 많은 정보를 머리에 넣다보니
잘 안되었던것같아요 일어나서 생각해보니 바로 되네요

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="button">
        <button onclick="알림창('아이디')">아이디</button>
        <button onclick="알림창('비번')">비밀번호</button>
    </div>
    <div class="alert-box" id="alert">
        <p id="title">알림창</p>
        <button onclick="알림창닫기('none');">닫기</button>
    </div>
    <script>   
        function 알림창(구멍){
            document.getElementById('button').style.display='none';
            document.getElementById('title').innerHTML= 구멍+'입력해주세요';
            document.getElementById('alert').style.display='block';
        }

        function 알림창닫기(구멍){
            document.getElementById('alert').style.display=구멍;
            document.getElementById('button').style.display='block';
        }
    </script>
</body>
</html>

글쓴이

글

3 글 보임 - 1 에서 3 까지 (총 3 중에서)

답변은 로그인 후 가능합니다.

로그인

코드 길이를 줄일수있을까요?

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png