JavaScript에서는 value 속성을 사용하여 텍스트 상자(input)에 입력된 값을 추출할 수 있으며, innerHTML을 활용하면 해당 값을 문단(p 태그)에 동적으로 표시할 수 있습니다.
예제
다음은 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
Enter your Name:
<input type="text" placeholder="enter your name" id="txtInputData">
<button onclick="displayName()">Click Me</button>
<p id="show_name">
</p>
</body>
<script>
function displayName() {
var originalName = document.getElementById("txtInputData").value;
document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
}
</script>
</html>실행 방법
위 프로그램을 실행하려면 먼저 파일 이름을 "anyName.html"(index.html)로 저장합니다. 그다음 VSCode 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다.
출력 결과
프로그램을 실행하면 브라우저에 다음과 같은 화면이 나타납니다.
이제 텍스트 상자에 이름을 입력하고 버튼을 클릭해 보세요.
버튼을 클릭하면 입력한 값이 다음과 같이 화면에 표시됩니다.
