Calvino Shaw Calvino Shaw - 4 months ago 27
CSS Question

Uncaught ReferenceError: Invalid left-hand side in assignment (change css background-color)

It's register page. I try to write something about Form validation.

I want to get the "em1" , and change it's color (to hightlight) when inputed password > 0 , to show register that his/her password is too weak.

but I don't know why the error happends, here is my code:



var em1 = document.getElementById("em1");
var em2 = document.getElementById("em2");
var em3 = document.getElementById("em3");

pass_input.onkeyup = function() {
if (this.value.length > 0) {
em1.style.background - color = "yellow";
}
}

#pass_em {
opacity: 0.5;
display: inline-block;
width: 150px;
text-align: center;
background-color: #ccc;
}
#em1 {
width: 45px;
text-align: center;
display: inline-block;
}
#em2 {
width: 45px;
text-align: center;
display: inline-block;
}
#em3 {
width: 45px;
text-align: center;
display: inline-block;
}

<tr>
<td class="tag">password´╝Ü</td>
<td>
<input type="password" id="password" name="password" />

<div id="pass_em">
<em id="em1">weak</em>
<em id="em2">soso</em>
<em id="em3">okey</em>
</div>
<span id="password_tip" style="color:red;">*</span>
</td>
</tr>





I guess it happends due to my method to change "em1"'s "background-color",
is it?

Answer

You can't do this:

em1.style.background - color = "yellow";

This is the right syntax:

em1.style.backgroundColor = "yellow";