Q: I am trying to specifically change a div to a chosen color, and not the entire body through JS
When using JS to utilize an input and change the background depending on a user-decided color, the only line of code I see/can get working is document.body.style.backgroundColor = color;
Is there a way to do, say, document.(classNameForADiv).style.backgroundColor = color;? I'm very new to HTML, CSS, and JS so any advice would be appreciated.
HTML:
<div class="cell text">
Background Color Picker:
</div>
<div class="cell js">
<input type="color" id="color_value" name="color_value" value="Black">
<!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
<button class="button two" type="button" onclick="changeBackground()">
Set Color:
</button>
</div>
JS:
function changeBackground(){
let color = document.getElementById('color_value').value;
document.body.style.backgroundColor = color;
}
This changes the background of the entire Body tag, whereas I'm looking for a solution to change the background of a Div tag.
change the color of div tag only. (document.getElementById("myDiv").style.backgroundColor);
Q: Is there a way to do document.(classNameForADiv).style.backgroundColor = color; ?
A: Yes, it's called querySelector, and it accepts a valid CSS selector. It will retrieve the first element in a page that matches the selector:
document.querySelector('.my-class').style.backgroundColor = color;
You can use document.querySelector(".my-class") to grab the first element that has my-class as class. In your case like so:
<div class="cell text">
Background Color Picker:
</div>
<div class="cell js">
<input type="color" id="color_value" name="color_value" value="Black">
<!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
<button class="button two" type="button" onclick="changeBackground()">
Set Color:
</button>
</div>
<script>
function changeBackground() {
let color = document.getElementById("color_value").value;
document.querySelector(".cell").style.backgroundColor = color;
}
</script>querySelector allows to grab HTML elements with the same selectors as CSS, witch can be really handy. If you wanna learn more about it, here is a great ressource.
You have to pick specific division for change division color.
function changeBackground(){
let color = document.getElementById('color_value').value;
let division = document.getElementById("cell_text");
division.style.backgroundColor = color;
}<div class="cell text" id = "cell_text">
Background Color Picker:
</div>
<br>
<div class="cell js">
<input type="color" id="color_value" name="color_value" value="Black">
<!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
<button class="button two" type="button" onclick="changeBackground()">
Set Color:
</button>
</div>Please check Updated your code
function changeBackground(){
let color = document.getElementById('color_value').value;
document.getElementById('color-box').style.backgroundColor = color;
} <div class="cell text">
Background Color Picker:
</div>
<div class="cell js">
<input type="color" id="color_value" name="color_value" value="Black">
<!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
<button class="button two" type="button" onclick="changeBackground()">
Set Color:
</button>
</div>
<div id="color-box">
THis is color box
</div>Then you have the specify the target div. I put below a div with ID output. That would change the color only in the div.
function changeBackground(){
let color = document.getElementById('color_value').value;
document.getElementById('output').style.backgroundColor = color;
}#output {
height:200px;
width:200px;
} Background Color Picker:
</div>
<div class="cell js">
<input type="color" onchange="changeBackground()" id="color_value" name="color_value" value="Black">
<!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
<button class="button two" type="button" onclick="">
Set Color:
</button>
</div>
<div id="output">traget DIV</div><div class="cell text">
Background Color Picker:
</div>
<div class="cell js" >
<input type="color" id="color_value" name="color_value" value="Black">
<!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
<button class="button two" type="button" onclick="changeBackground()">
Set Color:
</button>
</div>
<script>
function changeBackground() {
var color = document.getElementById("color_value").value;
document.body.style.backgroundColor=color;
}
</script>