안녕하세요. 혀코입니다.
오늘은 JavaScript로 form input으로 받은 문자를 웹페이지에 출력하는 방법에 대해서 알아보겠습니다.
index.html을 다음과 같이 작성합니다.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to Hyukho's Programming</p>
<form action="">
<input placeholder="Location">
<button>Submit</button>
</form>
<p id="result"></p>
<script src="app.js"></script>
</body>
</html>form 태그 안에는 input과 button 태그로 구성되어 있습니다.
script 태그를 맨 아래 붙여서 모든 DOM element가 로드 되면 script로 DOM을 다룰 수 있게 했습니다.
app.js를 다음과 같이 작성합니다.
const locationForm = document.querySelector('form')
const search = document.querySelector('input')
const messageOne = document.querySelector('#result')
locationForm.addEventListener('submit', (e) => {
e.preventDefault()
const location = search.value
messageOne.textContent = location
})form을 locationForm 변수로 저장합니다. 그리고 input을 search 변수로 저장합니다. 그리고 result 를 messageOne으로 저장합니다.
locationForm 에서 submit 이벤트가 발생, 즉 버튼이 눌리는 이벤트가 발생하면, 기본적으로 브라우저가 refresh되는데 e.preventDefault()를 통해서 브라우저가 refresh 되는 것을 막고 새로운 변수 location에 input으로 받은 값인 search.value를 저장합니다. 그 값을 messageOne.textContent로 저장해서 html의 p 태그에 표시되도록 했습니다.
이렇게 JavaScript로 form input으로 받은 문자를 웹페이지에 출력하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글