编程新手求助：点击按钮在HTML文本框显示JS结果并关联颜色选择器

先给你修正后的完整代码，再讲清楚每个关键修改点：

修正后的HTML代码 #

<!doctype html>
<html>
<link rel="stylesheet" href="styles.css">
<head>
    <title>颜色混合工具</title>
</head>
<body>
    <h1> New color Options </h1>
    <h3> Choose your color </h3>

    <!-- 新增两个颜色选择下拉框，和你的JS颜色逻辑匹配 -->
    <div>
        <label for="color1">第一个颜色：</label>
        <select id="color1">
            <option value="blue">蓝色</option>
            <option value="yellow">黄色</option>
            <option value="green">绿色</option>
            <option value="red">红色</option>
            <option value="white">白色</option>
        </select>
    </div>
    <div>
        <label for="color2">第二个颜色：</label>
        <select id="color2">
            <option value="blue">蓝色</option>
            <option value="yellow">黄色</option>
            <option value="green">绿色</option>
            <option value="red">红色</option>
            <option value="white">白色</option>
        </select>
    </div>

    <br>
    <!-- 用于显示结果的文本框 -->
    <input type="text" id="textb" placeholder="混合结果会显示在这里">
    <!-- 触发颜色混合的按钮 -->
    <input type="button" value="混合颜色" onclick="mixColors()">

    <!-- 保留你原有的mybox区域，可按需调整 -->
    <div id="mybox" class="box">
        <label for="mybox"> </label>
        <output name="mybox" type="text"><br>
    </div>
    <button onclick="ab()">Yes</button>

    <script src="colors.js"></script>
    <script>
        function ab() {
            document.getElementById("mybox").innerHTML = mixColors();
        }
    </script>
</body>
</html>

修正后的JavaScript代码（colors.js） #

function mixColors() {
    // 获取用户选择的两个颜色值
    const color1 = document.getElementById("color1").value;
    const color2 = document.getElementById("color2").value;
    const combined = color1 + color2;
    let result = "";

    // 颜色混合判断逻辑，合并了顺序不影响结果的情况
    if(combined === "blueblue"){
        result = "Water Blue";
    } else if(combined === "blueyellow" || combined === "yellowblue"){
        result = "Green";
    } else if(combined === "bluered" || combined === "redblue"){
        result = "Purple";
    } else if(combined === "bluegreen" || combined === "greenblue"){
        result = "Turquoise";
    } else if(combined === "bluewhite" || combined === "whiteblue"){
        result = "Light Blue";
    } else if(combined === "yellowyellow"){
        result = "Cheese Yellow";
    } else if(combined === "yellowred" || combined === "redyellow"){
        result = "Orange";
    } else if(combined === "yellowgreen" || combined === "greenyellow"){
        result = "Lime";
    } else if(combined === "yellowwhite" || combined === "whiteyellow"){
        result = "Light yellow";
    } else if(combined === "greengreen"){
        result = "grass green";
    } else if(combined === "greenred" || combined === "redgreen"){
        result = "brown";
    } else if(combined === "greenwhite" || combined === "whitegreen"){
        result = "light green";
    } else if(combined === "redred"){
        result = "blood red";
    } else if(combined === "redwhite" || combined === "whitered"){
        result = "pink";
    } else if(combined === "whitewhite"){
        result = "paper white";
    } else {
        result = "None";
    }

    // 把结果显示到文本框中
    document.getElementById("textb").value = result;
    // 返回结果，供其他函数调用（比如你原有的ab函数）
    return result;
}

关键修改说明 #

• 添加颜色选择器：用下拉框列出你JS里用到的所有颜色，确保获取到的颜色值和你的判断逻辑完全匹配，避免格式不兼容问题。
• 修正JS逻辑：原来的tests函数用固定值判断，现在改成获取用户选择的颜色，动态生成混合结果。
• 结果显示到文本框：通过document.getElementById("textb").value = result直接把结果赋值给文本框，替换了你原代码中不存在的new元素操作。
• 修复HTML结构错误：删掉了原代码中提前闭合的</body>标签，调整了script标签位置，保证JS能正常获取到页面元素。
• 简化重复逻辑：把颜色顺序不影响结果的情况（比如蓝+黄和黄+蓝）合并，减少冗余代码。

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