如何让javascript组合三种颜色？
首先，如果没有人回答这个冗长的问题，我完全理解。我不确定我的项目离基地有多远。我正在尝试构建一个改变div颜色的程序，我对javascript还不熟悉。我从一个类似的程序中借用了一些代码，但我无法将其格式化以用于我的项目 我试着移动我的javascript，我取得了一些成功，但我真的很难了解我做错了什么如何让javascript组合三种颜色？,javascript,html,css,Javascript,Html,Css,首先，如果没有人回答这个冗长的问题，我完全理解。我不确定我的项目离基地有多远。我正在尝试构建一个改变div颜色的程序，我对javascript还不熟悉。我从一个类似的程序中借用了一些代码，但我无法将其格式化以用于我的项目 我试着移动我的javascript，我取得了一些成功，但我真的很难了解我做错了什么 //js start var showButton = document.querySelector("#show"); var hideButton = document.querySele
//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
//js start
var showButton=document.querySelector（#show”）；
var hideButton=document.querySelector（“隐藏”）；
colorBar.style.backgroundColor=“红色”；
showButton.addEventListener（“单击”，showDiv，false）；
addEventListener（“单击”，hideDiv，false）；
函数showDiv（e）{
colorBar.style.display=“块”；
}
函数hideDiv（e）{
colorBar.style.display=“无”；
}
var showButton=document.querySelector（#show”）；
showButton.addEventListener（“单击”，showColorHandler，false）；
函数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（“清除”）；
showButton.addEventListener（“单击”，showColorHandler，false）；
clearButton.addEventListener（“单击”，clearColorHandler，false）；
函数showColorHandler（e）{
var r=parseInt（“55”）；
var g=parseInt（“11”）；
var b=parseInt（“99”）；
colorBar.style.backgroundColor=“rgb（“+r+”、“+g+”、“+b+”）；
}
函数clearColorHandler（e）{
清除（）；
}
函数clear（）{
colorBar.style.backgroundColor=“OldLace”；
}
var输入=document.querySelector（“输入”）；
var按钮=document.querySelector（“点击器”）；
addEventListener（“单击”，clickHandler，false）；
函数clickHandler（e）{
var n=parseInt（input.value）；
//验证输入值
如果（验证（n））{
output.innerHTML=“您输入了”+n；
}
否则{
警报（“您必须输入1到10之间的数字！”）；
}
}
函数验证（n）{
如果（n<1 | | n>10）{
返回false；
}否则{
返回true；
}
}
//js端
//html开始
彩色采样器
输入一个从0到255的数字：
红色的
绿色的
蓝色的
给我看看颜色！
隐藏颜色
全部重置
//html结尾
我只希望能够将0到255之间的数字放入三个文本框中，并在单击“显示颜色”按钮后让颜色栏更改颜色。我在这里为您做了一个小演示 这个演示的工作方式是我有三个输入：一个为红色，一个为蓝色，一个为绿色。我使用
valuestyles.backgroundColor=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（）；
});
函数handleInputs（）{
const rVal=rInput.value；
const gVal=gInput.value；
const bVal=bInput.value；
const rgbVal=`rgb（${rVal}，${gVal}，${bVal}）`；
div.style.backgroundColor=rgbVal；
}我在这里为您做了一个小演示 这个演示的工作方式是我有三个输入：一个为红色，一个为蓝色，一个为绿色。我使用
valuestyles.backgroundColor=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（）；
});
函数handleInputs（）{
const rVal=rInput.value；
const gVal=gInput.value；
const bVal=bInput.value；
const rgbVal=`rgb（${rVal}，${gVal}，${bVal}）`；
div.style.backgroundColor=rgbVal；
}