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 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Inline JavaScript

    Hey all,

    I'm coming down from an electronic dance festival so struggling to this write code atm. Can someone please help me? All I need to do is just make the colour of a SPAN element change colour onclick. I tried this, along with 20 similar writes, but failing to getting it to work.

    Code:
    <SPAN id="imageselectorfront" onclick="document.getElementById("imageselectorfront").color = silver;">FRONT</SPAN>

    Also off topic. I use to come on here back 2011. Is the legendary Old Pedant still around or has he retired? I'll never forget that guy.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    This should work
    <SPAN id="imageselectorfront" onclick="this.style.color = 'silver';">FRONT</SPAN>
    Old Pedant is still around although I haven't seen him on in a few weeks.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Phaelon (03-11-2014)

  • #3
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Hi. It didn't work

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    a span has a backgroundcolor, so that would be
    Code:
    <SPAN id="imageselectorfront" onclick="this.style.backgroundColor = 'silver';">FRONT</SPAN>
    you could also give your span a tabindex and do this without javascript:

    Code:
    <style>
         #imageselectorfront:focus{
        background-color:silver
    } 
        </style>
      </head>
      <body>
       <SPAN id="imageselectorfront" tabindex="1" >FRONT</SPAN>
      </body>

  • #5
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Hi xelawho. I'm wanting to change the text colour, not the background colour. The code needs to be inline.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    well in that case you should tell us what browser you are using, because sunfighter's code works for me in Chrome, IE and FF

  • #7
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I'm using Firefox 27.0.1.

    Look at the spec: https://developer.mozilla.org/en-US/...getElementById

    I have written it exactly, yet its not working.
    Code:
    <SPAN id="imageselectorglance" onclick="document.getElementById("imageselectorglance"): elem.style.color = silver;">GLANCE</SPAN>

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Phaelon View Post
    I'm using Firefox 27.0.1.

    Look at the spec: https://developer.mozilla.org/en-US/...getElementById

    I have written it exactly, yet its not working.
    Code:
    <SPAN id="imageselectorglance" onclick="document.getElementById("imageselectorglance"): elem.style.color = silver;">GLANCE</SPAN>
    the : should be ;

  • Users who have thanked DaveyErwin for this post:

    Phaelon (03-11-2014)

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I think you might need a little more recovery time after the festival. There's no way the docs are written exactly like that.

    First, double quotes inside double quotes ends the string. I kind of wish Old Pedant was around to explain it to you, but trust me.

    Second, silver here is not a variable, but a string, so it needs to go in quotes, too (and single ones, as well).

    Third, "elem" in your code is just something you decided to plop in there. The browser has no idea what you're talking about.

    I still maintain that sunfighter's method is the best (why use getElementById when you can just say "this"?), but if you really want to go that way, it would be
    Code:
    <SPAN id="imageselectorglance" onclick="document.getElementById('imageselectorglance').style.color = 'silver';">GLANCE</SPAN>

  • #10
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I have a feeling you guys are right. I am using lots of double quotes because when I use single quotes PHP breaks, and I've tried breaking out but can't. My brain isn't working AT ALL right now, but i have a whole day off and really need to use this time to get stuff thats been sitting here for years done. I need to understand what I am doing wrong.
    Last edited by Phaelon; 03-11-2014 at 02:08 AM.

  • #11
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    LOL OMFG... there was nothing even wrong with my JavaScript. It was ****in PHP locking up when I quoted my original code within quotes itself. I just re-learn't how to break out and tested sunfighters method and it worked fine. I didn't know single quotes and double quotes have a different effect in JavaScript. what a total joke! Thanks for your support guys.
    Last edited by Phaelon; 03-11-2014 at 02:08 AM.

  • #12
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Well you know what went wrong here? ****in Mozilla wrote the documentation wrong.

    https://developer.mozilla.org/en-US/...LElement.style
    div.style.marginTop = ".25in";
    Clearly double quotes don't work, so they should have made single quotes in their ****ty example. Open source documentation sucks.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    actually, javascript doesn't care about double or single quotes - where you do get into trouble is putting quotes inside of quotes
    Code:
    var str= "string 'No.1' works";
    alert(str);
    var str= 'string "No.2" works';
    alert(str);
    //if you really want to use doubles inside of doubles, you need to escape them...
    var str= "string \"No.3\" works";
    alert(str); 
    //same with singles inside of singles...
    var str= 'string \'No.4\' works';
    alert(str);
    but try it the way you were doing it:
    Code:
    var str= "string "No.5" doesn't work";
    alert(str);
    and of course the quotes that you are introducing with php will affect all of that, too...

  • Users who have thanked xelawho for this post:

    Phaelon (03-11-2014)

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Phaelon View Post

    Also off topic. I use to come on here back 2011. Is the legendary Old Pedant still around or has he retired? I'll never forget that guy.
    I am informed by his son that right now he is very ill and it may be a while before he is back online. Right now he is just concentrating on getting better.

    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.


  •  

    LinkBacks (?)

    1. 03-10-2014, 05:31 PM

    Posting Permissions

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