데이터 입출력(innerText 응용)

innerText응용

이제 innerText를 사용하여 몇가지 응용을 할것이다!

그전에 알아둬야 하는것은

window.confirm 과 window.prompt 이다

window.confirm 이란?

질문에 대한 "예"/"아니오" 결과를 얻고자 할 떄 사용하는 대화상자이다

- 확인버튼을 누르면 true 값이 반환되고

- 취소버튼을 누르면 false 값이 반환된다.

window.prompt 이란?

텍스트를 작성할 수 있는 대화상자가 나타나는데

- 확인버튼을 누르면 입력한 값을 반환하고

- 취소버튼을 누르면 null값을 반환한다.

---

우선!! window.confirm를 사용해서 innerText를 응용해보자!

이것도 마찬가지로 html문서를 먼저 작성해주자

위의 사진처럼 코드를 작성해주었으면 이제 아래 사진처럼 JS파일에 코드를 작성하자

js 코드에서 보면 알 수 있듯이 지금 우리가 하려고 하는것은 확인창에 배경을 분홍색으로 바꾸는 것에 대한 창을 띄우고

확인을 누른다면 배경을 분홍색으로 변경하고 취소를 누르면 바뀌지 않는것을 나타낼 것인데

코드를 다 작성후에 라이브 서버를 켜보면 아래 사진과 같이 나타난다.

위 사진처럼 노란색 배경의 사각형이 등장하는데 이제 confirm 확인하기 버튼을 누른다면?!

위의 사진처럼 상태창이 나타나는데 이제 확인버튼을 누른다면

위의 사진처럼 노란색 배경인 상자가 분홍색 배경으로 변하였다.

여기서 innerText를 알아볼 수 있는것은 

if ( confirm ("배경색을 분홍색으로 바꿀래?)) 라는 코드이다.

이 괄호 안에 html 태그를 넣어준다면 적용되지 않고 똑같이 나타난다!!

---

자 이제 window.prompt를 사용해서 버튼안에 내용을 바꿔보자!

똑같이 html 문서안에 코드를 작성해주자

위에 사진과 같이 버튼을 만들어 준뒤 JS파일로 넘어가 js 코드를 작성하자!

위에 js 코드처럼 작성해준다면

버튼을 눌렀을때 창이 뜨면서 그 안에는 변경할 버튼명을 입력하세요 라는 텍스트가 적혀있고

아래 작성할수 있는 상자가 있고 그 상자에 작성한 값이 버튼 이름으로 바뀌고

만일 취소를 누른다면 또다른 창이 뜨면서 취소되었습니다. 가 나타난다

 

이제 라이브 서버를 키고 확인해보자!!

위 사진에 있는 버튼을 클릭하면

이런 상태창이 뜨는데 여기에 변경된 버튼을 작성해보고 확인버튼을 누른다면

이렇게 변하게 되고 취소버튼을 누른다면

이런 상태창이 뜨게 된다!!