如何返回可變顏色值，以便可以在onclick事件中應用它？

Question

在下面，您可以看到我不完整的代碼。 第一個代碼塊可用於實時更新當前應用於空div的顏色值。 我希望能夠保存選定的值以在表上的onclick事件中使用。

我希望能夠使用RGB滑塊設置顏色。 然后單擊一個可以將值添加到backgroundColor的td元素。 為了能夠重復執行此操作，同時已經調用的onclick事件將保留先前選擇的顏色。

很感謝任何形式的幫助。

 var input = document.querySelectorAll("input"); for(var i = 0; i < input.length; i++){ input[i].addEventListener("input", function(){ var red = document.getElementById("red").value, green = document.getElementById("green").value, blue = document.getElementById("blue").value; var display = document.getElementById("display"); display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")"; }); } // HOW DO I RETURN THIS VALUE TO BE USED IN THE NEXT LINE OF CODE? THE VALUE WOULD REPLACE "myColor()" window.onload = function() { var cells = document.getElementsByClassName("tableBox"); for (let i = 0; i < cells.length; i++) { cells[i].onclick = function() { cells[i].style.backgroundColor = myColor(); } } }

 * { box-sizing: border-box; } body { margin: 0; padding: 0; font-size: 16px; color: #000; font-family: courier, arial, serif; } /* ////////// ////////// */ .container { display: flex; } .left { flex: 1; border: 1px solid #232323; margin: 0 auto; padding: 10px; } .right { flex: 1; } #display { border: 1px solid #000; width: 200px; height: 100px; background-color: #f00; } /* ///// ///// */ .grid { display: flex; border: 1px solid #000; height: 500px; padding: 20px; } table { display: block; margin: 0px auto; } td { border: 2px solid #000; padding: 30px; }

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="css/T4.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <div class="left"> <p>Red</p><input type="range" min="0" max="255" step="1" id="red" value="255"/> <br/><br/> <p>Green</p><input type="range" min="0" max="255" step="1" id="green" value="0"/> <br/><br/> <p>Blue</p><input type="range" min="0" max="255" step="1" id="blue" value="0"/> </div> <div class="right"> <div id="display"> </div> </div> </div> <div class="grid"> <table id="myTable"> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> </table> </div> <script src="js/T4.js"></script> </body> </html>

Answer 1

這是您要找的東西嗎？

function myColor() {
    var red = document.getElementById("red").value,
    green = document.getElementById("green").value,
    blue = document.getElementById("blue").value;

    return "rgb(" + red + ", " + green + ", " + blue + ")";
}

Answer 2

您無需保存該值，因為它已保存為'display'元素的背景色。

我建議您使用以下“ window.onload ”：

window.onload = function() {
    var cells = document.getElementsByClassName("tableBox");

    for (let i = 0; i < cells.length; i++) {
        cells[i].onclick = function() {
            var display = document.getElementById("display");
            cells[i].style.backgroundColor = display.style.backgroundColor;
        }
    }  
}

如何返回可變顏色值，以便可以在onclick事件中應用它？

問題描述

2 個解決方案

解決方案1
3 已采納 2018-11-01 22:40:16

解決方案2
1 2018-11-01 22:34:54

如何返回可變顏色值，以便可以在onclick事件中應用它？

問題描述

2 個解決方案

解決方案1 3 已采納 2018-11-01 22:40:16

解決方案2 1 2018-11-01 22:34:54

解決方案1
3 已采納 2018-11-01 22:40:16

解決方案2
1 2018-11-01 22:34:54