[DOM] JavaScript를 사용하여 글자를 클릭하면 배경색 변경하기

클릭 이벤트 함수 정의

먼저, 글자를 클릭할 때 실행될 클릭 이벤트 함수를 정의합니다. 아래의 'changeBg'함수는 'color' 매개변수를 받아서 해당 색상으로 배경색을 변경합니다

function changeBg(color) {
    // id="result" 위치에 배경색을 변경
    let result = document.querySelector("#result");
    // 배경색 변경
    result.style.backgroundColor = color;
}

글자 클릭 이벤트 설정

다음으로, 원하는 글자를 클릭하면 'changeBg' 함수가 호출되도록 설정합니다. 아래의 HTML 코드는 세 가지 글자로 이루어진 링크를 제공하면 각 글자를 클릭하면 배경색이 변경됩니다.

<a href="#" onclick="changeBg('green')">Green</a>
<br/>
<a href="#" onclick="changeBg('orange')">Orange</a>
<br/>
<a href="#" onclick="changeBg('purple')">Purple</a>
<br/>

이 코드는 Green,Orange,Purple 글자를 클릭하면 각각 배경색으로 변경하게 됩니다. 각 링크는 onclick 이벤트를 통해 changeBg 함수를 호출하고, 해당 색상을 매개변수로 전달합니다.