Javascript 通过单击对象而不是下拉菜单来更改颜色

几天前我就开始了，现在我想通过点击一个有颜色的物体来改变颜色

我如何摆脱

选择，并通过单击它们来选择颜色

提前谢谢

---

误读操作问题，编辑小提琴。

你有重复的ID，你不能有，这是无效的HTML

我的建议是：

HTML

---

演示当您单击div时，获取id（对于无seemless集成，将每个id命名为您想要的颜色并简单地应用它（您必须修改每个实例）），然后将其设置为画布绘制颜色。如果您使用现在的ID，您将有几个If语句来写下主题，如：“关于您编写的代码问题的问题必须在问题本身中描述特定的问题，并包括重现问题的有效代码。请参阅以获取指导。”查看此小册子。答案贴在下面@斯帕基，你在哪里？关于我评论的其他4个问题。“代码。我们需要代码！！！”Lol@Jack，赢得更多代表，以便您可以投票关闭。。。注释不是必需的。OP有一个

，应该连接到select。此代码也有重复的ID's@Sergio，没有重复的ID。不管怎么说，我误读了他的问题，我以为他想把盒子藏起来。我会修正我的答案，但在编辑之前请再次阅读我的答案，并告诉我是否看到任何重复ID。true！没有重复的身份证，我现在读得很快。如果你否决了我，请删除。谢谢。在CSS中，向select标记的id添加

display:none

。谢谢，这很有帮助。当我点击一种颜色时，UL部分会改变，但颜色保持不变。@YouGo，是的，我现在修复了它。哈哈，你是老板！谢谢你，伙计！好家伙。。。你帮助一个人完成了他的任务。@vishalkin，我们都是来帮忙的！

<script type="text/javascript">
    function myFunction(){
       var color = document.getElementById('selectColor').value;

        document.getElementById('colBlack').style.display = "none";    
        document.getElementById('colBlue').style.display = "none";    
        document.getElementById('colRed').style.display = "none";    
        document.getElementById('colGreen').style.display = "none";    
        document.getElementById('colOrange').style.display = "none";    
        document.getElementById('colYellow').style.display = "none";

        document.getElementById(color).style.display = "block";

    }
</script>

<p>Kies een kleur:<select id="selectColor" onchange="myFunction()">
                      <option value="colBlack" selected="selected">Zwart</option>
                      <option value="colRed">Rood</option>
                      <option value="colBlue">Blauw</option>
                      <option value="colGreen">Groen</option>
                      <option value="colOrange">Oranje</option>
                      <option value="colYellow">Geel</option>
                      </select>
    </p>
<div id="selectedColor">
        <div id="colBlue"></div>
        <div id="colRed"></div>
        <div id="colYellow"></div>
        <div id="colOrange"></div>
        <div id="colGreen"></div>       
        <div id="colBlack"></div>           
    </div>

#selectedColor div{
    display:none;
}
#colBlack {background-color:#000; height:100px; width:128px; float:left;}
#colRed {background-color:#be1e28; height:100px; width:128px; float:left;}
#colBlue {background-color:#479abd; height:100px; width:128px; float:left;}
#colYellow {background-color:#f6c910; height:100px; width:128px; float:left;}
#colGreen {background-color:#3bab4b; height:100px; width:128px; float:left;}
#colOrange {background-color:#ffa500; height:100px; width:128px; float:left;}

<div id="container">
    <div id="board">
        <canvas id="myCanvas" width="1024px" height="500px"></canvas>
        <p>Kies een kleur:
            <select id="selectColorSel">
                <option data-id="colBlack" value="#000000" selected="selected">Zwart</option>
                <option data-id="colRed" value="#be1e28">Rood</option>
                <option data-id="colBlue" value="#479abd">Blauw</option>
                <option data-id="colGreen" value="#3bab4b">Groen</option>
                <option data-id="colOrange" value="#f3601b">Oranje</option>
                <option data-id="colYellow" value="#f6c910">Geel</option>
            </select>
        </p>
    </div>
    <!-- END board -->
    <div id="selectColorDiv">
        <div id="colBlue"></div>
        <div id="colRed"></div>
        <div id="colYellow"></div>
        <div id="colGreen"></div>
        <div id="colBlack"></div>
        <div id="colRed"></div>
        <div id="colYellow"></div>
        <div id="colGreen"></div>
    </div>
</div>

window.onload = function () {
    var myCanvas = document.getElementById("myCanvas");
    var curColor = $('#selectColorSel option:selected').val();
    if (myCanvas) {
        var isDown = false;
        var ctx = myCanvas.getContext("2d");
        var canvasX, canvasY;
        ctx.lineWidth = 5;
        $(myCanvas)
            .mousedown(function (e) {
            isDown = true;
            ctx.beginPath();
            canvasX = e.pageX - myCanvas.offsetLeft;
            canvasY = e.pageY - myCanvas.offsetTop;
            ctx.moveTo(canvasX, canvasY);
        })
            .mousemove(function (e) {
            if (isDown != false) {
                canvasX = e.pageX - myCanvas.offsetLeft;
                canvasY = e.pageY - myCanvas.offsetTop;
                ctx.lineTo(canvasX, canvasY);
                ctx.strokeStyle = curColor;
                ctx.stroke();
            }
        })
            .mouseup(function (e) {
            isDown = false;
            ctx.closePath();
        });
    }
    $('#selectColorSel').change(function () {
        curColor = $('#selectColorSel option:selected').val();
    });
    $('#selectColorDiv div').click(function () {
        var sel = $('[data-id="' + this.id + '"]').val();
        $('#selectColorSel').val(sel);
         curColor = $('#selectColorSel option:selected').val();
    });
};