TypeError: $(...) is null

390 views
Skip to first unread message

tab1ta

unread,
Dec 19, 2012, 8:13:15 AM12/19/12
to prototype-s...@googlegroups.com
Taking from an example that works:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Show-Hide Divs</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
    <style type="text/css" media="screen">
     .toggle {
       padding: 0;
       margin-left: 1em;
       background-color: #989699;
       border: 2px solid #1f0c00;
       float: left;
       opacity:0.7;
     }
     #menu {
       float: left;
     }
    </style>
</head>
<body>
    <div id="menu">
     <ul>
       <li><a href="#thing_1">One</a></li>
       <li><a href="#thing_2">Two</a></li>
       <li><a href="#thing_3">Three</a></li>
       <li><a href="#thing_4">Four</a></li>
       <li><a href="#thing_5">Five</a></li>
       <li><a href="#thing_6">Six</a></li>
     </ul>
    </div>
  <div id="thing_1" class="toggle">
   <p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
  </div>
  <div id="thing_2" class="toggle">
   <p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
  </div>
  <div id="thing_3" class="toggle">
   <p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
  </div>
  <div id="thing_4" class="toggle">
   <p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
  </div>
  <div id="thing_5" class="toggle">
   <p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
  </div>
  <div id="thing_6" class="toggle">
   <p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
  </div>
  <script type="text/javascript">
    var toggles = $$('.toggle').invoke('hide');
    $('menu').on('mouseover', 'a', function(evt, elm){
      evt.stop();
      toggles.invoke('hide');
      $(elm.href.split('#').last()).show();
    });
    $('menu').on('mouseout', 'a', function(evt, elm){
      evt.stop();
      toggles.invoke('show');
      $(elm.href.split('#').last()).hide();
       toggles = $$('.toggle').invoke('hide');
    })
  </script>
</body>
</html>

I tried to apply this script to a complete webpage but i trows me an error TypeError the $('') function considers the id i pass to it as a null. My web page is longer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
@import url(styles.css);
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
  <script type="text/javascript">
								var toggles = $$('.toggle').invoke('hide');
								$('gallery').on('mouseover', 'a', function(evt, elm){
								evt.stop();
								  toggles.invoke('hide');
								  $(elm.href.split('#').last()).show();
								});
								$('gallery').on('mouseout', 'a', function(evt, elm){
								  evt.stop();
								  toggles.invoke('show');
								  $(elm.href.split('#').last()).hide();
								  toggles = $$('.toggle').invoke('hide');
								});  </script>
<title>Python Speculative Interface</title>

</head>
<body>
	
		
<div class="main"><div id="header">
			<div class="primariga">
				
				<div class="tab-active">
				<a href="/py/index.php?tabindex=0">
Concept				</a>
				</div>
				<div class="tab">
				<a href="/py/index.php?tabindex=1">
Wiki				</a>
				</div>
			</div>
		</div></div><div class="main">
		<div class="tab-content" >
<div class="main">
		<img class="logo" src="images/psi.png" /></div>
		
			<div class="containere">
				<div class="boxtab">
					<form action="http://joy.indivia.net/py/cgi-bin/OOpoetry.cgi" method="get">

					<h>Python from a theoretical point of view</h>
					<p>This interface aims to show and explain some communicative and theoretical aspects inscribed in the mechanisms behind a programming language. The programming language named Python is useful to achieve this goal as it provides an interpreter but it can even run source code as object code.</p>
					<p>If you search for a command of the python programming language in the form below you will get the description of the logical and communicative process executed by it in the machine. The explanation can be of a logical, mathematical or semiological nature.</p><p> This is an attempt to enhance python programming language as a signifying language, which can execute not only algebrical processes but even what could be defined as meaning.</p><br />
					<p>
						<input id="example" name="stringx" value="type here"/>&nbsp;&nbsp;<input id="submit" type="submit" value="search"/></form></p>
					</div>
				<div id="gallery"><ul><li>
							<a href="#thing_1"><img class="galleryitem" src="images/gallery1.jpg.jpg"/></a></li><li>
							<a href="#thing_2"><img class="galleryitem" src="images/3188832812_573db43c7d.jpg"/></a></li><li>
							<a href="#thing_3"><img class="galleryitem" src="images/3188858500_3437070b8f.jpg"/></a></li><li>
							<a href="#thing_4"><img class="galleryitem" src="images/3188063503_e2b752444f.jpg"/></a></li><li>
							<a href="#thing_5"><img class="galleryitem" src="images/3188039487_5fa50f0d02.jpg"/></a></li><li>
							<a href="#thing_6"><img class="galleryitem" src="images/3188061317_d7a4bb7c27.jpg"/></a></li></ul></div>
						<div id="thing_1" class="toggle">
								<p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
							</div>
							<div id="thing_2" class="toggle">
								<p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
							</div>
							<div id="thing_3" class="toggle">
								<p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
							</div>
							<div id="thing_4" class="toggle">
								<p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
							</div>
							<div id="thing_5" class="toggle">
								<p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
							</div>
							<div id="thing_6" class="toggle">
								<p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
							</div></div></div></div>

</body>
</html>

Walter Lee Davis

unread,
Dec 19, 2012, 8:26:10 AM12/19/12
to prototype-s...@googlegroups.com
You can fix this two different ways: either move your script block to the bottom of the page (just before /body, as in my example) or add an unobtrusive listener block around your main function. The issue here is that because your script appears before the HTML it applies to, none of the elements are present in the DOM yet when the closure tries to wrap around them.

Here's how to wrap them (if you want to put the script at the top of the page:

<script type="text/javascript">
document.observe('dom:loaded', function(){
var toggles = $$('.toggle'). [etc...]
});
</script>

Walter

On Dec 19, 2012, at 8:13 AM, tab1ta wrote:

> Taking from an example that works:
>
> <!DOCTYPE html>
> <html>
> <head>
> <meta charset="utf-8" />
> <title>Show-Hide Divs</title>
> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
> [snip]

> toggles = $$('.toggle').invoke('hide');
> })
> </script>
> </body>
> </html>
>
> I tried to apply this script to a complete webpage but i trows me an error TypeError the $('') function considers the id i pass to it as a null. My web page is longer.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <style type="text/css">
> @import url(styles.css);
>
> </style>
> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
> <script type="text/javascript">
> var toggles = $$('.toggle').invoke('hide');

[snip]

> <div id="thing_6" class="toggle">
> <p>&copy; by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
> </div></div></div></div>
>
> </body>
> </html>
>
>
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/uxHIYaSumLsJ.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply all
Reply to author
Forward
0 new messages