How do I find the value of an input?

Question

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>

You've retrieved the element, but you need the element's value: `typeColor = document.getElementById("typeColor").value;` — mykaf, Apr 17 '23 at 17:40
body { margin: 0px; } #box { width: 100px; height: 100px; background-color: grey; margin-left: 100px; margin-top: 50px; } THIS IS THE CSS — sewqq, Apr 17 '23 at 17:41
Fix the typo of the extra `}` use the value. `box.style.backgroundColor = typeColor.value;` — epascarello, Apr 17 '23 at 17:42
How do you plan to do validation on the value for entries like "not a color" — Mark Schultheiss, Apr 17 '23 at 17:43
@MarkSchultheiss the OP can do something like https://stackoverflow.com/questions/15135216/can-i-check-if-a-css-property-is-valid-with-jquery/64550463#64550463, but seems to be more than what is being asked currently. — epascarello, Apr 17 '23 at 17:47
You should make sure you declare your variables properly with `let` or `const` or (at the very least) `var`. [Some information](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/). — Andy, Apr 17 '23 at 18:03
the whole answer might be `document.getElementById("typeColor").value;` — Mark Schultheiss, Apr 17 '23 at 18:17

score 0 · Answer 1 · answered Apr 17 '23 at 17:48

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>

score 0 · Answer 2 · answered Apr 17 '23 at 17:50

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>

score 0 · Answer 3 · answered Apr 17 '23 at 17:55

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>

score 0 · Answer 4 · answered Apr 17 '23 at 17:58

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

score 0 · Answer 5 · answered Apr 17 '23 at 17:58

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>

How do I find the value of an input?

5 Answers5

Syntax

Linked

Related