Trying to change text field color using JavaScript

Question

I'm trying to make the text field change its color but it doesn't seem to work Here is the code:

<html>
<head>
  <title>   
  This is a title
  </title>

<script type="text/javascript">
    function changeColor()
    {
    alert("bla")
    document.getElemenyById("text1").style.background-color:red;
    }
</script>
</head>

<body>

<form>
<input id="text1" type="text" onkeypress="changeColor()">
</form>


</body>

</html>

thank you

Use `backgroundColor` instead – RienNeVaPlu͢s Sep 07 '13 at 12:54 — RienNeVaPlu͢s, Sep 07 '13 at 12:54

score 4 · Answer 1 · answered Sep 07 '13 at 12:55

4

That's a syntax error. You can't use CSS syntax (background-color: red) inside JavaScript.

You want to actually assign a value (the string "red") to a member of the style object called backgroundColor:

...style.backgroundColor = "red";

answered Sep 07 '13 at 12:55

user229044

232,980
40
330
338

nnnnnn · Answer 2 · 2013-09-07T12:59:56.420

Try this:

document.getElementById("text1").style.backgroundColor = "red";

Demo: http://jsfiddle.net/jG95a/

There were four problems in your code:

A typo in getElementById() (you had a "y" instead of a "t")
background-color is not valid in JS dot notation, you need backgroundColor
You need = not :
red needs to be a string, "red"

Or to put those last three points another way, the way you had background-color:red is appropriate in a stylesheet, but not in JavaScript.

score 2 · Answer 3 · answered Sep 07 '13 at 13:00

2

If using Jquery use CSS() . If Plain Javascript

document.getElementById("text1").style.backgroundColor = "red";

or

document.getElementById("text1").style("backgroundColor":"red");

One error is in "getElementById" typo

answered Sep 07 '13 at 13:00

Alice Stewert

65
5

1

Did you test that second option? – nnnnnn Sep 07 '13 at 13:04
yeah using jquery we write $("#text1").style("backgroundColor":"red"); – Alice Stewert Sep 07 '13 at 13:05
No we don't. What I was hinting at is that that is a syntax error. Try it and see. (For it to work with a colon you need to pass an object.) – nnnnnn Sep 07 '13 at 13:07

score 2 · Answer 4 · edited Sep 07 '13 at 13:37

1) most of CSS attributes accessed from JavaScript need to replace all "-" and use rpn style, ie.

background-color becomes backgroundColor,

border-collapse becomes borderCollapse and so on.

2) When manipulating styles in JavaScript one may often need to update multiple attributes at once. A good and elegant method is to use the JavaScript "with" statement :

with(document.getElementById("text1").style) {
    backgroundColor = 'red' ;
    fontWeight = 'bold' ;
    // etc... 
}

3) the jQuery way is also simple :

$('#text1').css({
    "background-color": "red", 
    "font-weight": "bold"
}) ;

http://api.jquery.com/css/

Trying to change text field color using JavaScript

4 Answers4