Dummies에 대한 JavaScript 제출 이벤트 리스너.
제출 이벤트
제출 이벤트 리스너는 개발자가 작업에 사용할 기본 이벤트 리스너 중 하나입니다. 이 유형의 이벤트 리스너는 사용자가 웹 페이지에서 제출 버튼을 클릭할 때 수신 대기합니다. 예를 들어:
HTML 코드:
<body>
<div>
<form id="new-name">
<label for="firstname">First Name: </label>
<input type="text" name="firstname" id="new-firstname" />
<label for="lastname">Last Name: </label>
<input type="text" name="lastname" id="new-lastname" />
<input type="submit" value="Create Name" />
</form>
</div>
<br>
<p>Full Name Here:</p>
<p id="name-result"></p>
</body>
사용자에게 이름과 성을 입력하도록 요청하는 양식이 있다고 가정해 보겠습니다. JavaScript에서는 먼저 이벤트 리스너를 추가하려는 html 요소에서 id/class를 가져와야 합니다. 그러기 위해서는 우리가 잡고자 하는 html 요소가 될
const를 생성해야 합니다. 이 경우 양식의 IDnew-name를 가져오려고 합니다.const form = document.querySelector('#new-name')new-name id를 가져와서 변수와 동일하게 설정한 후 제출 이벤트 리스너를 양식에 추가할 수 있습니다.form.addEventListener('submit', () => {})다음 단계는 제출 버튼을 클릭할 때마다 웹 페이지를 새로 고치는 제출 이벤트 리스너의 기본 기능을 방지하는 것입니다. 이를 방지하기 위해 다음과 같이 작성합니다.
form.addEventListener('submit', (event) => {
event.preventDefault();
})
제출 버튼을 클릭할 때마다 페이지가 새로고침되지 않으므로 이제 사용자가 자신의 이름을 입력할 때 얻은 입력 값을 가져올 수 있습니다. 양식 ID를 가져온 것처럼 각 입력 ID를 가져와 새 변수로 설정해야 합니다.
const newFirstName = document.querySelector('#new-firstname').value;
const newLastName = document.querySelector('#new-lastname').value;
먼저 사용자 입력이 있는 html 요소의 id를 가져옵니다. 그런 다음 사용자가 텍스트 상자에 입력한 정보를 나중에 사용하기 위해 저장하기 위해 입력의
.value를 가져와야 합니다. 그런 다음 새 값을 기록하는 콘솔을 통해 올바른 값을 가져왔는지 확인할 수 있습니다.console.log(newFirstName);
console.log(newLastName);
사용자가 입력한 텍스트는 이제
Create Name 버튼을 클릭할 때 콘솔에 표시되어야 합니다. 완벽한! 이제 사용자가 볼 수 있도록 ID가 p인 name-result 요소에 이러한 입력 값을 삽입할 수 있습니다.const result = document.querySelector('#name-result');
result.innerText = `${newFirstName} ${newLastName}`;
.innerText 요소 내부의 텍스트를 변경하기 위해 p를 사용합니다. 그런 다음 문자열 보간법을 사용하여 사용자가 제출하는 입력 값을 입력합니다. 이제 사용자가 입력한 이름이 웹 페이지에 표시됩니다! 축하합니다. 제출 이벤트 리스너를 만드셨습니다!!
Reference
이 문제에 관하여(Dummies에 대한 JavaScript 제출 이벤트 리스너.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rossonevan/javascript-submit-event-listeners-for-dummies-5f99텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
