views:

37

answers:

2

My code for changing the background color works great, but the "else" return does not work. Am I missing something? here is what i have:

<script type="text/javascript">
$(document).ready(function() {
  var input = document.getElementById("test");

  input.onclick = function ()
  {
    document.getElementById("quote_input").style.backgroundColor = "#AAB3AA";
    document.getElementById("test").style.backgroundColor = "#AAB3AA";

    else {
      document.getElementById("quote_input").style.backgroundColor = "#000";
      document.getElementById("test").style.backgroundColor = "#000";

    }  
  };
});
</script>
+1  A: 

you're missing the "if" part of the statement...

 <script type="text/javascript">
 $(document).ready(function() {
 var input = document.getElementById("test");

 input.onclick = function ()
 {

    if(SOME_CONDITION) {
 document.getElementById("quote_input").style.backgroundColor = "#AAB3AA";
    document.getElementById("test").style.backgroundColor = "#AAB3AA";

    } else {
 document.getElementById("quote_input").style.backgroundColor = "#000";
 document.getElementById("test").style.backgroundColor = "#000";

 }



 };});
 </script>
Basiclife
Thank you... Can the some condition be as simple as the existing background color?
Erik
@Erik: A condition must evaluate to a boolean value. What is your intention with the `else` clause? What is the purpose of the code? If you just do `if("#AAB3AA")`, it will always evaluate to `true`. I *guess* that you want `if(document.getElementById("quote_input").style.backgroundColor == '#000')` to toggle the colors.
Felix Kling
I want to want to change the background color of the input and a div when clicked and returned when clicked outside.
Erik
I went ahead with your suggestion:<script type="text/javascript"> $(document).ready(function() { var input = document.getElementById("test"); input.onclick = function () { if(document.getElementById("quote_input").style.backgroundColor == '#AEB7AD') { document.getElementById("quote_input").style.backgroundColor = "#AAB3AA"; document.getElementById("test").style.backgroundColor = "#AAB3AA"; } else { document.getElementById("quote_input").style.backgroundColor = "#AEB7AD"; document.getElementById("test").style.backgroundColor = "#AEB7AD"; } };}); </script>
Erik
Still won;t return to its original state
Erik
That's because you're only "doing something" when the user clicks on the desired item, not when they "blur" (click away from) the desired item. Really all you need to do is have 2 events, onclick and onblur. In one of them you set one colour, in the other you return to the origional colour.
Jamie Dixon
I'm confused do combine the two together or separate functions?
Erik
No good...$(document).ready(function() {var input = document.getElementById("test");input.onblur = function (){ document.getElementById("quote_input").style.backgroundColor = "#AEB7AD"; document.getElementById("test").style.backgroundColor = "#AEB7AD"; };});$(document).ready(function() {var input = document.getElementById("test");input.onclick = function (){ document.getElementById("quote_input").style.backgroundColor = "#AAB3AA"; document.getElementById("test").style.backgroundColor = "#AAB3AA"; };});</script>
Erik
Thanks Felix for your help. I figured it out!!! many thanks:<script type="text/javascript">jQuery(document).ready(function() { jQuery("#test").focus(function () { jQuery(this).addClass("highLightInput"); jQuery("#quote_input").addClass("highLightInput"); }); jQuery("#test").blur(function () { jQuery(this).removeClass("highLightInput"); jQuery("#quote_input").removeClass("highLightInput"); });});</script>
Erik
+5  A: 

Well sir, unless I'm mistaken, you are missing an IF statement.

Ed Guiness