자바스크립트 프롬프트로 텍스트 문자열을 직접 입력받아 선택한 문장 변경하는 방법

이번에는 자바스크립트를 사용하여 특정 문장을 입력한 문장으로 바꿔치기 하는 방법입니다. 프롬프트(Prompt)를 사용해서 매우 쉽게 변경할 수 있습니다. 어떻게 하는건지 바로 알아보겠습니다.

일단 간단한 태그를 사용해 HTML은 이렇게 구성했습니다. p 태그와 input 태그가 전부입니다.

1 2

< p id="test01" >안녕하세요. 친절한효자손입니다.< / p > < input type="button"  value="클릭해서 텍스트 변경하기"  onclick="CW();" >

cs

p태그에는 test01이라는 id값을 부여했으며 input 태그에는 value값과 onclick 이벤트가 마크업되어 있습니다. onclick의 큰 따옴표안에 있는게 함수명입니다. 즉 input을 클릭하면 CW라는 스크립트 함수가 시작되는 것입니다.

1 2 3 4 5 6 7 8 9

< script >     function CW() {         var A;         var B;         A =prompt("텍스트 변경","");         B = document.getElementById("test01");         B.innerText =A;     } < / script > Colored by Color Scripter

cs

CW함수는 이렇게 구성되어 있습니다. 변수는 A와 B를 선언하였고 A변수는 프롬프트가, B변수는 A에서 받은 텍스트 문장을 기준으로 test01이라는 id값을 가진 태그에 그대로 반영하도록 설계가 되어있는 것입니다.

See the Pen Javascript : Prompt 로 지정한 텍스트 문장 변경하기 by rgy0409 (@rgy0409) on CodePen.

직접 해보시라고 코드펜에 본문에 소개해드린 코드를 그대로 올렸으니 한번 클릭 후 원하는 문장을 입력하시고 바뀌는 모습을 두 눈으로 확인해 보시기 바랍니다. 크게 어려운 내용이 아니기에 쉽게 조작하실 수 있으실 거에요. 오늘 내용 끝!