如何使用JavaScript接收用户输入的颜色并完成对应展示

实现说明 #

你提供的参考代码存在逻辑错误：document.getElementById()需要传入DOM元素的id属性值，原代码错误传入了message变量存储的文本内容，会导致找不到对应元素报错。
正确实现逻辑如下：

• 页面先准备好id为message的展示元素
• 调用prompt接收用户输入的颜色值（支持颜色名、十六进制、rgb等格式）
• 把颜色值应用到message元素的字体样式上，同步展示预设内容

完整可运行代码 #

<!-- 页面展示容器 -->
<div id="message"></div>

<script type="text/javascript">
    // 接收用户输入的颜色
    const textcol = window.prompt("请输入颜色值：");
    const message = "Nice color choice";
    // 获取id为message的元素，设置字体颜色
    document.getElementById("message").style.color = textcol;
    // 写入展示内容
    document.getElementById("message").innerText = message;
</script>

可选兼容优化 #

可以增加输入校验逻辑，处理用户点击取消、输入无效色值的异常场景：

const textcol = window.prompt("请输入颜色值：");
const message = "Nice color choice";
const messageEl = document.getElementById("message");
// 校验输入有效性
if (textcol && CSS.supports('color', textcol)) {
    messageEl.style.color = textcol;
} else {
    messageEl.style.color = '#333';
}
messageEl.innerText = message;

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