자바스크립트로 텍스트로 입력한 내용 팝업창으로 띄우기

 

 

 

---

이제 코드를 바꿔서 'clicked!!' 라는 팝업창을 띄우지 않고 사용자가 박스안에 직접 입력한 내용을 팝업창으로 띄워 보겠습니다. 

 

먼저 다음과 같이 입력창에 아이디를 부여합니다. 

 

<input type="text"   id="my-input">

 

 

그 다음은 자바스크립트의 alert("clicked")를 다음과 같이 바꿉니다

 

 

alert(document.getElementById

("my-input").value)

 

 

 

 

위 코드가 무슨 작업을 진행하고 있는지 이해가 되시나요? 문서 또는 HTML 페이지 안의 아이디 'my-input'을 가진 구성요소의 값을 팝업창으로 띄우고 있습니다.  이를 실행해 보면 박스 안에 어떤 내용이 입력되어도 팝업창으로 출력이 됩니다. 

 

아래와 같은 코드에서 어떤 부분을 수정하면  위에 설명한 것처럼 무엇을 입력해도 팝업창으로 뜨도록 고칠수 있는지 자세히 알아봅시다.  빨간 밑줄친 부분 2개를 고치면 됩니다 

 

 

 

 

 

 

첫번째 밑줄을 <input type="text"  id="my-input"> 으로 수정한다

 

두번째 밑줄은 alert(document.getElementById("my-input").value) 으로 수정한다

 

그러면 아래와 같은 코딩이 된다

 

 

 

 

 

 

이 코드를 실행하면 어떤 결과가 나올지 봅시다