[DOM]JavaScript를 사용하여 성과 이름 조합 출력하기

 성과 이름 조합 출력

먼저, 사용자가 성을 입력할 수 있는 입력란을 선택합니다. 아래 코드는 '#familyText' ID를 가진 입력 태그를 선택합니다.

let familyText = document.querySelector("#familyText"); // 성 입력란 선택

그리고 사용자가 이름을 입력할 수 있는 이력란을 선택합니다. 이 예제에서는 '#firstText' ID를 가진 입력 태그를 사용합니다.

let firstText = document.querySelector("#firstText"); // 이름 입력란 선택

다음으로 성과 이름을 조함하여 풀 네임을 출력할 위치를 선택합니다. 이 예제에서는 '#fullName' ID를 가진 요소를 사용하여 풀네임을 표시 합니다.

let fullName = document.querySelector("#fullName"); // 풀 네임 출력 위치 선택

이제 'addEventListener' 메서드를 사용하여 사용자가 입력란에 텍스트를 입력할 때마다 실행될 함수를 정의합니다. 두입력란 중 하나라도 변경될때 풀 네임이 업데이트 됩니다.

familyText.addEventListener("keyup", function () {
    // 성이 입력되면 풀 네임 업데이트
    fullName.innerHTML = familyText.value + firstText.value;
});

firstText.addEventListener("keyup", function () {
    // 이름이 입력되면 풀 네임 업데이트
    fullName.innerHTML = familyText.value + firstText.value;
});

각 입력란에서 사용자가 입력한 성과 이름을 조합하여 풀 네임을 출력하기 위해 keyup 이벤트를 활용합니다. 이 이벤트는 사용자가 키보드에서 키를 눌렀다가 놓을 때 발생하며, 이를 활용하여 사용자가 입력하는 동안 풀 네임이 실시간으로 업데이트됩니다.