<style>
    p {color: rgb(231, 32, 14);
    background-color: rgb(44, 44, 162);
    margin: 20px;
    font-size: 30px;
    border-radius: 10px;
    padding: 20px;
    }
</style>    



<p id="box">알람 박스</p>

<input id="control" type="button" value="alert" onclick="
        if (this.value === 'alert')
            {document.getElementById('box').style.display = 'none';
            this.value = 'close';}

        else {document.getElementById('box').style.display = 'block';
                this.value = 'close';}">    



스타일 태그는 헤드 안에 집어 넣고 내가 구현하려는 건 


웹에는 alert 버튼이 있고 이걸 누르면 p태그의 알람박스와 함께 버튼이 close로 바뀌는 거임 그리고 close 버튼을 누르면 다시 alert버튼만 나타나는 상태로 돌아오는 거임.


그런데 버튼 value값이 서로 반대가 되었고 작동도 이상하게 함


내가 뭐 잘못한건가. 만약 this값이 input값과 같으면 p태그를 숨겨주고 버튼값을 close로 바뀌게 한다 


아 좀 알려줘라. 


을 누르면