如何在JavaScript中根据用户输入更改文本颜色

问题 #

我希望根据用户在输入框中输入的颜色，更改header的颜色。想写出通用的逻辑，而不是给每种颜色写单独的函数（那样太冗余）。目前的HTML代码如下：

<h1 id="header"> Hi There </h1>

<p>Choose from one of the following options!</p>

<ul>
    <li id="darkred">Dark red</li>
    <li id = "darkorange">Dark orange</li>
    <li id = "yellow">Yellow</li>
    <li id = "darkgreen">Dark Green</li>
    <li id = "teal">Teal</li>
    <li id = "navy">Navy</li>
    <li id = "indigo">Indigo</li>
    <li id = "fuchsia">Fuchsia</li>
    <li id = "lavender">Lavender</li>
    <li id = "pink">Pink</li>
</ul>
<input type="text" id="inp"/>

我原本想写类似这样的逻辑，但不确定怎么正确实现：

if (user input === color){
    document.getElementById("header").style.color ="that color"
}

另外也不确定给列表项加id有没有帮助，这是我第一次做JavaScript练习。

通用解决方案 #

你给列表项加的id刚好能派上用场——这些id本身就是CSS能识别的颜色值（比如darkred、yellow），完全可以用一个通用函数搞定，不用写一堆重复的if判断。

方法1：监听输入框实时生效 #

直接监听输入框的内容变化，只要输入的是合法颜色值（包括你列表里的命名色），就直接应用到header上：

// 获取页面元素
const input = document.getElementById('inp');
const header = document.getElementById('header');

// 监听输入事件，内容变化时触发
input.addEventListener('input', function() {
    // 把输入内容转小写并去空格，避免大小写/空格导致的匹配失败
    const color = this.value.trim().toLowerCase();
    // 直接设置header颜色
    header.style.color = color;
});

这种写法不仅支持列表里的颜色，用户输入其他合法颜色值（比如#ff0000、rgb(0,255,0)）也能生效。

方法2：点击列表项快速选择（优化体验） #

既然有现成的颜色列表，还可以给每个列表项加点击事件，点击后自动填入输入框并设置header颜色，不用用户手动输入：

const header = document.getElementById('header');
const input = document.getElementById('inp');
// 获取所有带id的列表项
const colorItems = document.querySelectorAll('li[id]');

// 给每个列表项绑定点击事件
colorItems.forEach(item => {
    item.addEventListener('click', function() {
        const color = this.id;
        // 设置header颜色
        header.style.color = color;
        // 同步把颜色名称填入输入框
        input.value = this.textContent;
    });
});

这样用户既可以手动输入，也能点击列表快速选择，代码依然简洁，没有冗余。

补充说明 #

• 不用写一堆if判断的原因：你给列表项设置的id刚好和CSS内置的颜色名对应，直接拿id当颜色值用就行，完全不需要逐个判断匹配。
• 转小写是为了兼容用户的各种输入格式，比如输入DarkRed也能正确匹配darkred颜色。

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