Issue
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.
Solution
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>
Answered By - Faeemazaz Bhanej
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.