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 >
            Background Color Picker:
        </div>
        <div >
            <input type="color" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button  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.

CodePudding user response：

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  id = "cell_text">
    Background Color Picker:
</div>
<br>
<div >
   <input type="color" id="color_value" name="color_value" value="Black">
   <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
   <button  type="button" onclick="changeBackground()">
        Set Color:
   </button>
</div>

CodePudding user response：

change the color of div tag only. (document.getElementById("myDiv").style.backgroundColor);

CodePudding user response：

Please check Updated your code

function changeBackground(){
let color = document.getElementById('color_value').value;
document.getElementById('color-box').style.backgroundColor = color;
}

 <div >
            Background Color Picker:
        </div>
        <div >
            <input type="color" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button  type="button" onclick="changeBackground()">
                Set Color:
            </button>
        </div>
        
        <div id="color-box">
        THis is color box
        </div>

CodePudding user response：

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 >
            <input type="color" onchange="changeBackground()" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button  type="button" onclick="">
                Set Color:
            </button>
        </div>

<div id="output">traget DIV</div>

CodePudding user response：

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;

CodePudding user response：

You can use document.querySelector(".my-class") to grab the first element that has my-class as class. In your case like so:

<div >
  Background Color Picker:
</div>
<div >
  <input type="color" id="color_value" name="color_value" value="Black">
  <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
  <button  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.

CodePudding user response：

<div >
    Background Color Picker:
</div>
<div  id="bg">
    <input type="color" id="color_value" name="color_value"   value="Black">
    <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
    <button  type="button" onclick="changeBackground()">
        Set Color:
    </button>
</div>
<script>
    function changeBackground() {
        var color = document.getElementById("bg").value;
        document.color.style.backgroundColor= color;
    }
</script>