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 个答案: