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 to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Javascript Coding Problem

    I'm using javascript to set the style of my button onmouseover and onmouseout. The main idea is that when the user mouse's over the button it changes and then onmouseout it changes back to normal. I've tried everything i can think of but cannot resolve my error. I keep getting the error "Uncaught TypeError: Cannot read property 'style' of null".

    Here is my javascript code:
    Code:
     function menu_button(x){
    	if(x.indexOf("_o")!==-1){
    		document.getElementById(x).style.backgroundColor = 'transparent';
    		document.getElementById(x).style.border = 'none';
    	}
    	if(x.indexOf("start_button")!==-1){
    		document.getElementById(x).style.backgroundColor = 'rgba(25, 25, 25, 0.7)';
    		document.getElementById(x).style.border = 'inset white';
    	}
    }
    And here is my html code:
    Code:
    <input type="button" value="Computer" onClick="alert('This button has no location yet.')" onmouseover="menu_button(this.id)" onMouseout="menu_button(this.id+'_o')" id="start_button1" style="background-color: transparent; border: none; font-size: medium; width: 125px; height: 25px;" />
    <br />
    <input type="button" value="My Files" onClick="alert('This button has no function yet.')" onmouseover="menu_button(this.id)" onmouseout="menu_button(this.id+'_o')" id="start_button2" style="background-color: transparent; border: none; font-size: medium; width: 125px; height: 25px;" />
    Thanks in advanced
    Last edited by Webos8668; 12-07-2012 at 09:04 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Change both !==-1 to !=-1
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm still getting the error "Uncaught TypeError: Cannot read property 'style' of null".

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Both buttons will ALWAYS have an indexOf("start_button") > -1 (both IDs begin with "start_button" and that will never change.)

    The error message means that document.getElementById(x) is null.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Pardon me, but that just seems really ugly code with a ton of overkill.

    Why not keep it both simple an modernt?

    Code:
    <html>
    <head>
    <style type="text/css"
    input.variableOff {
        background-color: transparent; border: none; 
        font-size: medium; width: 125px; height: 25px;
    }
    input.variableOn {
        background-color: rgba(25, 25, 25, 0.7); border: inset white; 
        font-size: medium; width: 125px; height: 25px;
    }
    </style>
    </head>
    <body>
    ... other stuff ...
    
    <input type="button" value="Computer" class="variableOff" />
    <br />
    <input type="button" value="My Files" class="variableOff" />
    ...
    ... other stuff...
    
    <script type="text/javascript">
    (
      function( ) /* anonymous master function */
      {
          var inps = document.getElementsByTagName("input");
          for ( var i = 0; i < inps.length; ++i )
          {
              var inp = inps[i];
              if ( inp.className == "variableOff" )
              {
                  inp.onclick = function() { alert("This button has no function yet"); };
                  inp.onmouseover = function() { this.className = "variableOn"; }'
                  inp.onmouseout  = function() { this.className = "variableOff"; };
              }
          }
          /* other initialization can go here */
    
      }
    )( ); // self-invoke the anonymous master function
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Even if you don't want to use the more modern anonymous master function style of coding, at the very least do this:
    Code:
    <html>
    <head>
    <style type="text/css"
    input.variableOff {
        background-color: transparent; border: none; 
        font-size: medium; width: 125px; height: 25px;
    }
    input.variableOn {
        background-color: rgba(25, 25, 25, 0.7); border: inset white; 
        font-size: medium; width: 125px; height: 25px;
    }
    </style>
    </head>
    <body>
    ... other stuff ...
    
    <input type="button" value="Computer" class="variableOff" 
           onmousever="this.className='variableOff';"
           onmouseout="this.className='variableOn';"
           onclick="alert('This button has no function yet');"
    />
    <br />
    <input type="button" value="My Files" class="variableOff" 
           onmousever="this.className='variableOff';"
           onmouseout="this.className='variableOn';"
           onclick="alert('This button has no function yet');"
    />
    ... other stuff...
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Webos8668 (12-07-2012)

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, they both did the trick. I don't really code in css so i don't really know how to use it fully.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by WolfShade View Post
    Change both !==-1 to !=-1
    You should never use != or == in JavaScript as they are considered to be extremely sloppy and error prone ways to code. Those comparisons will fail when you validate your code though jslint.com because they are likely to cause errors. That was the only piece of modern JavaScript coding that the OP was using.

    If the types are known to differ before comparing then you should convert them to the same type yourself before comparing them.

    When comparing a variable to a fixed value put the fixed value on the left as that makes it easier to detect typos.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Quote Originally Posted by Webos8668 View Post
    Thanks, they both did the trick. I don't really code in css so i don't really know how to use it fully.
    As you can see, it's really no different that using an inline style="..." except that you name the class and put it between <style> and </style>.

    There are, of course, many other tricks you can use.

    For example:
    Code:
    <html>
    <head>
    <style type="text/css">
    input.variable {
        background-color: transparent; border: none; 
        font-size: medium; width: 125px; height: 25px;
    }
    input.variable:hover {
        background-color: rgba(25, 25, 25, 0.7); border: inset white; 
    }
    </style>
    </head>
    <body>
    
    <input type="button" value="Computer" class="variable" 
           onclick="alert('This button has no function yet');"
    />
    <br />
    <input type="button" value="My Files" class="variable" 
           onclick="alert('This button has no function yet');"
    />
    
    </body>
    </html>
    Now you don't need onmouseover or onmouseout, *AT ALL*!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You should never use != or == in JavaScript as they are considered to be extremely sloppy and error prone ways to code. Those comparisons will fail when you validate your code though jslint.com because they are likely to cause errors.
    I frequently use != and == and do not consider it sloppy or necessarily error prone.
    Code:
    if (fruit == 'banana') {
    If I know that fruit is a string then I am happy with this expression. jslint is over-zealous.
    If the types are known to differ before comparing then you should convert them to the same type yourself before comparing them.
    Yes, but having made the conversion there is no need for ===. JS is dynamically-typed and type-conversion should be used where necessary or appropriate.
    When comparing a variable to a fixed value put the fixed value on the left as that makes it easier to detect typos.
    I always put the variable on the left and will continue to do so - it looks more natural to me. If there is a typo I will discover it. I appreciate that, for a beginner, it might be useful that
    Code:
    54 = someVariable
    is flagged as an error, but it just looks wrong (in Western eyes) - this is more important to me.

    These are my considered opinions and, as always, are not provided as statements of immutable fact.
    In philosophy and logic, an immutable truth is an unchanging universal fact or reality that is not influenced by human opinion. According to positivism, observation and experience are the only ways for immutable truths to become fully realized or understood.
    Last edited by AndrewGSW; 12-08-2012 at 08:52 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Quote Originally Posted by AndrewGSW View Post
    I frequently use != and == and do not consider it sloppy or necessarily error prone.
    Code:
    if (fruit == 'banana') {
    If I know that fruit is a string then I am happy with this expression. jslint is over-zealous.

    Yes, but having made the conversion there is no need for ===. JS is dynamically-typed and type-conversion should be used where necessary or appropriate.

    I always put the variable on the left and will continue to do so - it looks more natural to me. If there is a typo I will discover it. I appreciate that, for a beginner, it might be useful that
    Code:
    54 = someVariable
    is flagged as an error, but it just looks wrong (in Western eyes) - this is more important to me.

    These are my considered opinions and, as always, are not provided as statements of immutable fact.
    I have to say that entirely agree with your remarks. But as always chacun à son goût applies. People should not claim that their own personal preferences are the only "valid" or "correct" approach when there are equally acceptable alternatives.. That is the thin end of the fanticism wedge.
    Last edited by Philip M; 12-08-2012 at 09:08 AM. Reason: Noticed typo

    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.

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    People should not claim that their own personal prefernces are the only "valid" or "correct" approach.
    Exactement! Hence the 'disclaimer'. Ouvrir la porte!
    Last edited by AndrewGSW; 12-08-2012 at 09:11 AM. Reason: Kept Philips' typo, he, he!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    And ev'ryone will say,
    As you walk your mystic way,
    "If that's not good enough for him which is good enough for me,
    Why, what a very cultivated kind of youth this kind of youth must be!"
    - W.S.Gilbert, Patience

    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.

  • #14
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    “I have opinions of my own - strong opinions - but I don't always agree with them.”
    ― George H.W. Bush
    Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

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