DOM 요소를 함수의 매개변수로 전달

이전 강의들에서는 함수에 요소 선택자를 전달했으며, 함수는 자신의 코드 내부에서 해당 요소에 대한 참조를 직접 가져왔습니다. 또 다른 접근 방식이 있습니다: 함수에 이미 이전에 획득한 요소에 대한 참조를 전달할 수 있습니다.

예제를 통해 살펴보겠습니다. 다음과 같은 코드가 있다고 가정해 보겠습니다:

<p id="elem1"></p>
<p id="elem2"></p>

첫 번째 매개변수로 DOM 요소에 대한 참조를 받고, 두 번째 매개변수로 요소의 텍스트를 받는 함수 setText를 만들어 보겠습니다:

function setText(elem, text){
	elem.textContent = text;
}

우리가 만든 함수를 사용하여 단락의 텍스트를 설정해 보겠습니다:

let elem1 = document.getElementById('elem1');
setText(elem1, 'text1');

let elem2 = document.getElementById('elem2');
setText(elem2, 'text2');

첫 번째 매개변수로 DOM 요소를, 두 번째 매개변수로 텍스트를 받는 함수 appendText를 만드세요. 이 함수가 해당 요소의 끝에 텍스트를 추가하도록 하세요.

단락이 주어져 있습니다. 이를 가져와서 루프로 순회하고, 각 단락의 끝에 이전 문제에서 만든 함수 appendText를 사용하여 '!'를 추가하세요.

첫 번째 매개변수로 입력 필드에 대한 참조를, 두 번째 매개변수로 텍스트를 받는 함수 setValue를 만드세요. 이 함수가 전달된 텍스트를 입력 필드의 value에 설정하도록 하세요.