JS_13_입력한색으로변경

html code

<main>
	<section class="color-area">

		<div class="container">
			<div class="box"></div>
			<input type="text" class="color-input">
		</div>
        
		<div class="container">
			<div class="box"></div>
			<input type="text" class="color-input">
		</div>
        
		<div class="container">
			<div class="box"></div>
			<input type="text" class="color-input">
		</div>
        
		<div class="container">
			<div class="box"></div>
			<input type="text" class="color-input">
		</div>
        
		<div class="container">
			<div class="box"></div>
			<input type="text" class="color-input">
		</div>
	</section>

	<button id="changeButton">색상 변경</button>
</main>

js code

const boxList = document.querySelectorAll(".box");
const inputList = document.querySelectorAll(".color-input");

document.querySelector("#changeButton").addEventListener("click", function() {

    for(let i = 0; i<boxList.length; i++) {
        boxList[i].style.backgroundColor = inputList[i].value;
    }
});