Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Banned
    Join Date
    Jun 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Simple background colour changing function not working

    Code:
    function tablea() {
    	document.getElementById("tablea").background-color = "lightgray";
    }
    Code:
    <A href="tables/a/" id="tablea" onclick="tablea()" style="background-color: gray">foobar</A>
    Firefox's error console reports:
    Error: invalid assignment left-hand side
    Source Code:
    document.getElementById("tablea").background-color = "lightgray";
    ... pointing at the equals character.

    I have no idea what that means, does anyone know what the issue is here?
    Last edited by Phalanxer; 06-30-2012 at 07:07 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    CSS properties with hyphens in them are represented by JavaScript properties in camelCase.

    (CSS) background-color
    should be (Javascript) backgroundColor - note the capital C


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Phalanxer (06-30-2012)

  • #3
    Banned
    Join Date
    Jun 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hey Phil,

    Thanks, the error messages are gone, but the background colour isn't changing.
    Last edited by Phalanxer; 06-30-2012 at 08:21 AM.

  • #4
    Banned
    Join Date
    Jun 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Try it yourself and you'll see what I mean:

    Code:
    <STYLE type="text/css">
    	A {color: black;}
    </STYLE>
    <SCRIPT type="text/javascript">
    	function tablea() {document.getElementById("tablea").backgroundColor = "green";}
    	function tableb() {document.getElementById("tableb").backgroundColor = "green";}
    </SCRIPT>
    <A href="a/" id="tablea" onclick="tablea()" style="background-color: red" target="table">111</A>
    <A href="b/" id="tableb" onclick="tableb()" style="background-color: red" target="table">222</A>
    <IFRAME name="table"></IFRAME>
    Last edited by Phalanxer; 06-30-2012 at 08:41 AM.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    No surprise. You are assigning the same name to an id and a function.

    id="tablea" onclick="tablea()"

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Banned
    Join Date
    Jun 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I now have a function called 'tableafunction()' and an id called 'tablea'.

    Code:
    <STYLE type="text/css">
    	A {color: black;}
    </STYLE>
    <SCRIPT type="text/javascript">
    	function tableafunction() {document.getElementById("tablea").backgroundColor = "green";}
    	function tablebfunction() {document.getElementById("tableb").backgroundColor = "green";}
    </SCRIPT>
    <A href="a/" id="tablea" onclick="tableafunction()" style="background-color: red" target="table">111</A>
    <A href="b/" id="tableb" onclick="tablebfunction()" style="background-color: red" target="table">222</A>
    <IFRAME name="table"></IFRAME>
    Still doesn't work.
    Last edited by Phalanxer; 06-30-2012 at 09:13 AM.

  • #7
    Banned
    Join Date
    Jun 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I needed to put '.style' infront of .backgroundColor.

    Solved.

    EDIT: Having the same names wasn't a problem either... Suprise!
    Last edited by Phalanxer; 06-30-2012 at 09:24 AM.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Phalanxer View Post
    I needed to put '.style' infront of .backgroundColor.

    Solved.

    EDIT: Having the same names wasn't a problem either... Suprise!
    It is very poor practice and will cause a crash in IE. Example:-

    Code:
    <input id = "text">
    
    <script type = "text/javascript">
    text = "Hello World";  // global variable
    document.getElementById('text').value = text;
    </script>

    IE automatically reserves a var ID = domElement; in the global space for each DOM-Element with an ID. Some other browsers adopted this behaviour. So the same name for a javascript function /variable and an id will collide.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Banned
    Join Date
    Jun 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I disagree with it being bad practice. I think its good practice, because it creates consistency which in turn makes it easier to work with.

    LOL IE! I never ever think of IE when developing a website, only web standards. IE isn't even a web browser to me.
    Thanks for your opinion though.

    I am building an application that will be used by me only.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Phalanxer View Post
    I am building an application that will be used by me only.
    Well, that means you can break as many guidelines as you want. What you do in the privacy of your own home ....

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Banned
    Join Date
    Jun 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Best practices aside, I will never rest until a page I am making is standard compliant in all languages that I am using - even if its just for me.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •