Java Script button which changes color
Task: create a button that changes its color depending on the numbers in the inputs
Java Script code:
function color() {
//First input
let colorValueFirst = document.getElementById('inputRed').value;
//Second input
let colorValueSecond = document.getElementById('inputGreen').value;
//Third input
let colorValueThird = document.getElementById('inputBlue').value;
// colorValue.classList.add("color");
let fullColor = "rgb(" + colorValueFirst + "," + colorValueSecond + "," + colorValueThird + ")";
document.getElementById("chaning-div").style.backgroundColor = fullColor;
}
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body class="body">
<div class="main">
<div class="inputs-div">
<input type="number" class="input" placeholder="Red" id="inputRed">
<input type="number" class="input" placeholder="Green" id="inputGreen">
<input type="number" class="input" placeholder="Blue" id="inputBlue">
</div>
<div class="chaning-div" id="chaning-div" onclick="color()">
</div>
</div>
</body>
<script src="./script.js"></script>
</html>Result
