首先，如果没有人回答这个冗长的问题，我完全理解。我不确定我的元素离基准有多远。我正在尝试构建一个改变 div 颜色的程序，我是 javascript 的新手。我从一个类似的程序中借用了一些代码，但我未能将其格式化以适用于我的元素。
我试过移动我的 javascript 并取得了一些成功，但我真的很难了解我做错了什么。
//js start
var showButton = document.querySelector("#show");
var hideButton = document.querySelector("#hide");
colorBar.style.backgroundColor = "red";
showButton.addEventListener("click", showDiv, false);
hideButton.addEventListener("click", hideDiv, false);
function showDiv(e) {
colorBar.style.display = "block";
}
function hideDiv(e) {
colorBar.style.display = "none";
}
var showButton = document.querySelector("#show");
showButton.addEventListener("click", showColorHandler, false);
function showColorHandler(e) {
var r = parseInt("55");
var g = parseInt("11");
var b = parseInt("99");
container.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
container.style.backgroundColor = "burlywood";
var showButton = document.querySelector("#show");
var clearButton = document.querySelector("#clear");
showButton.addEventListener("click", showColorHandler, false);
clearButton.addEventListener("click", clearColorHandler, false);
function showColorHandler(e) {
var r = parseInt("55");
var g = parseInt("11");
var b = parseInt("99");
colorBar.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
function clearColorHandler(e) {
clear();
}
function clear() {
colorBar.style.backgroundColor = "OldLace";
}
var input = document.querySelector("#input");
var button = document.querySelector("#clicker");
button.addEventListener("click", clickHandler, false);
function clickHandler(e) {
var n = parseInt( input.value );
// validate the input value
if ( validate(n)){
output.innerHTML = "you entered " + n;
}
else {
alert("You must enter a number from 1 to 10!");
}
}
function validate(n) {
if ( n < 1 || n > 10) {
return false;
} else {
return true;
}
}
//js end
//html start
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Color sampler</title>
<link rel="stylesheet" href="colorStyles.css">
</head>
<body>
<div id="container">
<p><strong>Enter a number from 0 to 255:</strong></p>
<div class = inputArea> <p>Red</p>
<input type="text" id="input" maxlength="3" size="5" value="55" align="right">
</div>
<div class = inputArea>
<p>Green</p>
<input type="text" id="input" maxlength="3" size="5" value="11" align="right">
</div>
<div class = inputArea>
<p>Blue</p>
<input type="text" id="input" maxlength="3" size="5" value="99" align="right">
</div><br>
<div id="colorBar"></div>
<div>
<button id="show">Show me the color!</button>
<button id="hide">Hide the color</button><br>
<button id="clear">Reset all</button><br>
</div>
</div>
<script src="colorChange.js"></script>
</body>
</html>
//html end
我只想将 0 到 255 之间的数字放入三个文本框中，并在单击显示颜色按钮后让颜色条改变颜色。
最佳答案
我在这里为您做了一个小演示。
这个演示的工作方式是我有三个输入:一个用于红色，一个用于蓝色，一个用于绿色。我已使用 value HTML 属性将这些输入设置为从 0 开始。我的 JavaScript 中有事件监听器，等待用户更改这些输入。一旦其中一个被更改，我就会触发一个函数，该函数获取输入的当前值并从中创建一个“rgb()”字符串。然后使用 styles.backgroundColor = 将此字符串应用于 div。这样，用户可以通过更改三个输入来操纵 div 的颜色。
Here's a silly little website我让它做这样的事情，只是为了好玩。
运行这个演示来尝试一下:
const div = document.getElementById("div");
const rInput = document.getElementById("r");
const gInput = document.getElementById("g");
const bInput = document.getElementById("b");
document.getElementById("r").addEventListener('change', () => {
handleInputs();
});
document.getElementById("g").addEventListener('change', () => {
handleInputs();
});
document.getElementById("b").addEventListener('change', () => {
handleInputs();
});
function handleInputs() {
const rVal = rInput.value;
const gVal = gInput.value;
const bVal = bInput.value;
const rgbVal = `rgb(${rVal},${gVal},${bVal})`;
div.style.backgroundColor = rgbVal;
}<input id="r" placeholder="R" type="number" value=0 min="0" max="255" step="1"></input>
<input id="g" placeholder="G" type="number" value=0 min="0" max="255" step="1"></input>
<input id="b" placeholder="B" type="number" value=0 min="0" max="255" step="1"></input>
<div id="div" style="height: 200px; background-color: rgb(0, 0, 0);"></div>也许看到这个工作示例会让您开始思考如何将这种想法应用到您的代码中。
关于javascript - 如何让我的 javascript 组合三种颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54413980/