Resolved Javascript Coding Problem

Webos8668 · 12-07-2012, 08:18 PM

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

WolfShade · 12-07-2012, 08:30 PM

Change both !==-1 to !=-1

Webos8668 · 12-07-2012, 08:39 PM

I'm still getting the error "Uncaught TypeError: Cannot read property 'style' of null".

WolfShade · 12-07-2012, 08:46 PM

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.

Old Pedant · 12-07-2012, 08:47 PM

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>

Old Pedant · 12-07-2012, 08:49 PM

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>

Webos8668 · 12-07-2012, 08:59 PM

Thanks, they both did the trick. I don't really code in css so i don't really know how to use it fully.

felgall · 12-07-2012, 08:59 PM

Quote:

Originally Posted by WolfShade

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.

Old Pedant · 12-07-2012, 09:08 PM

Quote:

Originally Posted by Webos8668

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*!

AndrewGSW · 12-08-2012, 08:47 AM

Quote:

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.

Quote:

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.

Quote:

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.

Quote:

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.

Philip M · 12-08-2012, 09:04 AM

Quote:

Originally Posted by AndrewGSW

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.

AndrewGSW · 12-08-2012, 09:10 AM

Quote:

People should not claim that their own personal prefernces are the only "valid" or "correct" approach.

Exactement! Hence the 'disclaimer'. Ouvrir la porte!

Philip M · 12-08-2012, 09:40 AM

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

AndrewGSW · 12-08-2012, 10:10 AM

Quote:

“I have opinions of my own - strong opinions - but I don't always agree with them.”
― George H.W. Bush

Andy.