Question 49982 in Javascript Question posted in
A very good W3school tutorial can be found here.

How do I find the value of an input? – Javascript

How do I make the color of the box be the value of the input?

box = document.getElementById("box");
typeColor = document.getElementById("typeColor");

function changeBoxColor() {
  box.style.backgroundColor = typeColor;
}
  
//box is a div, typeColor is an input
body {
  margin: 0px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: grey;
  margin-left: 100px;
  margin-top: 50px;
}
<input id="typeColor" placeholder="Type a color...">
<button onclick="changeBoxColor()">Change Box Color</button>
<div id="box">
</div>
Tags:

5

Answers


  1. 0

    change color setting line as follows.

    box.style.backgroundColor = typeColor.value;

    box = document.getElementById("box");
typeColor = document.getElementById("typeColor");

function changeBoxColor() {
  box.style.backgroundColor = typeColor.value;
}
    body {
  margin: 0px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: grey;
  margin-left: 100px;
  margin-top: 50px;
}
    <input id="typeColor" placeholder="Type a color...">
<button onclick="changeBoxColor()">Change Box Color</button>
<div id="box">
</div>
    Login or Signup to reply.
  2. 0

    Here is an working code snippet

    box = document.getElementById("box");
typeColor = document.getElementById("typeColor");

function changeBoxColor() {
  box.style.backgroundColor = typeColor.value;
}
    body {
  margin: 0px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: grey;
  margin-left: 100px;
  margin-top: 50px;
}
    <input type="color" id="typeColor" placeholder="Type a color...">
<button onclick="changeBoxColor()">Change Box Color</button>
<div id="box">
</div>
    Login or Signup to reply.
  3. 0

    You can simply type the text on input box and in your code instead of typeColor please use the typeColor.value you can fill the box with the provided color name on that box.

    Thank you.

    box = document.getElementById("box");
typeColor = document.getElementById("typeColor");

function changeBoxColor() {
  box.style.backgroundColor = typeColor.value;
}
  
//box is a div, typeColor is an input
    body {
  margin: 0px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: grey;
  margin-left: 100px;
  margin-top: 50px;
}
    <input id="typeColor" placeholder="Type a color..." value="Red">
<button onclick="changeBoxColor()">Change Box Color</button>
<div id="box">
</div>
    Login or Signup to reply.
  4. 0

    The value property sets or returns the value of the value attribute of a input tag field.

    Syntax

    Return the value property:

    let returnValue = inputObject.value

    Set the value property:

    let someNumber = 23;
inputObject.value = someNumber

    Transfered to your code example:

    box = document.getElementById("box");
typeColor = document.getElementById("typeColor");

function changeBoxColor() {
  box.style.backgroundColor = typeColor.value;
}
//box is a div, typeColor is an input

    More about that can be found here

    Login or Signup to reply.
  5. 0

    Why make it simple when you can make it very complicated?

    const 
  box     = document.getElementById('box')
, btColor = document.getElementById('btColor')
  ;

btColor.onchange = () => 
  {
  box.style.backgroundColor = btColor.value;
  }
     
#box {
  width       : 100px;
  height      : 100px;
  background  : red;
  margin-left : 100px;
  margin-top  : 50px;
  }
    <input id="btColor" type="color" value="#FF0000"> 
 
<div id="box">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search