如何通过JS事件监听使用HTML表单输入修改HTML元素背景色

现有代码 #

HTML部分 #

<div class="item" id="taskThreeContainer">
<h2>Task 3</h2>
<p>在下方输入框填写合法的CSS背景色值时，该区块的背景色会同步修改为对应颜色。</p>
<input type="text" id="task3Input">
<script src="script.js" async defer></script>

原JS代码 #

// 任务3
const inputColor = document.getElementById("task3Input").value;
const taskThreeContainer = document.getElementById("taskThreeContainer");

function convertColor() {
    taskThreeContainer.style.backgroundColor = inputColor;
};

document.getElementById("task3Input").addEventListener("input", convertColor);

错误原因 #

代码在脚本初始化阶段就提前读取了输入框的value值，此时用户还未输入任何内容，读取到的是空值，且后续输入事件触发时，不会重新读取输入框的最新内容，所以修改不生效。

修复后代码 #

// 任务3
const taskThreeContainer = document.getElementById("taskThreeContainer");

function convertColor() {
    // 每次输入事件触发时，实时读取输入框的最新值
    const inputColor = document.getElementById("task3Input").value.toString();
    taskThreeContainer.style.backgroundColor = inputColor;
};

document.getElementById("task3Input").addEventListener("input", convertColor); 

内容的提问来源于stack exchange，提问作者mikkeltg