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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts

    next() is not defined error

    Code:
    $(document).ready(function(){
    	var theText=["Text one","Text two","Text three", "Text four"]; // Build the array of text
    	var arrayRows = theText.length; //Get the length of the array (Note: This starts at 1 not 0 like the array)
    	var i=0; //Set a counter
    	document.getElementById('textHere').innerHTML =theText[i]; //Fill in the space with the first piece of text
    	time = setTimeout("next()", 2000);	
    	function next() {
    		if (i == (arrayRows-1)) {
    			i = 0;
    		}else {
    			i++;
    		}
    		$("#textHere").fadeOut("slow", function(){ 
    			document.getElementById('textHere').innerHTML =theText[i];
    			
    			$("#textHere").fadeIn("slow");
    		});
    	}
    	function prev() {
    			if (i <= 0) { // If its below 0 go to the max
    			i = arrayRows-1;
    		}else {
    			i--;
    		}
    		$("#textHere").fadeOut("slow", function(){  //Fade out the area
    			document.getElementById('textHere').innerHTML =theText[i]; //Change the text to the next piece of text
    			$("#textHere").fadeIn("slow"); // Fade in the area
    		});
    	}
    	$("#prevText").click(function(e) {
    		e.preventDefault(); // Stop the link being a link
    		prev();
    	});
    	$("#nextText").click(function(e) {	
    			e.preventDefault();	
    			next();
    	});
    });
    When i click the links the functions work, however the setTimeout doesnt, can anyone help me figure this out?

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    891
    Thanks
    0
    Thanked 117 Times in 116 Posts
    At the time where your call the setTimeout, the function "next" hasn't been defined yet.

    If you move "next" to some where above the setTimeout call, then the function would be defined BEFORE it is called.

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Code:
    $(document).ready(function(){
    	var theText=["Text one","Text two","Text three", "Text four"]; // Build the array of text
    	var arrayRows = theText.length; //Get the length of the array (Note: This starts at 1 not 0 like the array)
    	var i=0; //Set a counter
    	document.getElementById('textHere').innerHTML =theText[i]; //Fill in the space with the first piece of text
    
    	function next() {
    		if (i == (arrayRows-1)) {
    			i = 0;
    		}else {
    			i++;
    		}
    		$("#textHere").fadeOut("slow", function(){ 
    			document.getElementById('textHere').innerHTML =theText[i];
    			
    			$("#textHere").fadeIn("slow");
    		});
    	}	
    		
    	function prev() {
    			if (i <= 0) { // If its below 0 go to the max
    			i = arrayRows-1;
    		}else {
    			i--;
    		}
    		$("#textHere").fadeOut("slow", function(){  //Fade out the area
    			document.getElementById('textHere').innerHTML =theText[i]; //Change the text to the next piece of text
    			$("#textHere").fadeIn("slow"); // Fade in the area
    		});
    	}
    	$("#prevText").click(function(e) {
    		e.preventDefault(); // Stop the link being a link
    		prev();
    	});
    	$("#nextText").click(function(e) {	
    			e.preventDefault();	
    			next();
    	});
    	
    	
    		time = setTimeout("next()",  2000);
    });
    Even then i get the same error =[

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    891
    Thanks
    0
    Thanked 117 Times in 116 Posts
    to help you further I need to see the full document then.

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JavaScript Stuff</title>
    <style type="text/css">
    a {
    	text-decoration:none;
    }
    
    #example1 {
    	background-color:#C93;
    	width:400px;
    	margin:0px auto;
    	text-align:center;
    	-moz-border-radius:0.5em;
    }
    </style>
    <script type="text/javascript" src="jquery-1.5.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){
    	var theText=["Text one","Text two","Text three", "Text four"]; // Build the array of text
    	var arrayRows = theText.length; //Get the length of the array (Note: This starts at 1 not 0 like the array)
    	var i=0; //Set a counter
    	document.getElementById('textHere').innerHTML =theText[i]; //Fill in the space with the first piece of text
    
    	function next() {
    		if (i == (arrayRows-1)) {
    			i = 0;
    		}else {
    			i++;
    		}
    		$("#textHere").fadeOut("slow", function(){ 
    			document.getElementById('textHere').innerHTML =theText[i];
    			
    			$("#textHere").fadeIn("slow");
    		});
    	}	
    		
    	function prev() {
    			if (i <= 0) { // If its below 0 go to the max
    			i = arrayRows-1;
    		}else {
    			i--;
    		}
    		$("#textHere").fadeOut("slow", function(){  //Fade out the area
    			document.getElementById('textHere').innerHTML =theText[i]; //Change the text to the next piece of text
    			$("#textHere").fadeIn("slow"); // Fade in the area
    		});
    	}
    	$("#prevText").click(function(e) {
    		e.preventDefault(); // Stop the link being a link
    		prev();
    	});
    	$("#nextText").click(function(e) {	
    			e.preventDefault();	
    			next();
    	});
    time = setTimeout("next()",  2000);
    });
    </script>
    </head>
    
    <body>
    <h1>Hide-Display different text</h1>
    <div id="example1"><a href="" style="float:left;" id="prevText" title="prev"> < </a><span id="textHere">Default Text Here</span><a href="" style="float:right;" id="nextText" title="next"> > </a></div>
    
    </body>
    </html>
    Thats the whole thing. Im after getting the text to auto change every so many seconds, but you can also change it yourself via the < and > links
    Last edited by tomharto; 06-02-2011 at 07:06 PM.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    just a note here. next() is a function already defined in jquery. I would suggest renaming your function.

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Ahh okay, ill try that, thanks.

    EDIT: Still same error but thanks for the tip

  • #8
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    891
    Thanks
    0
    Thanked 117 Times in 116 Posts
    for some reason it doesn't like that you are defining these "ordinary" functions
    inside the ready-function.

    I moved most of the stuff outside it, and renamed the functions to znext and zprev:
    Code:
    <script type="text/javascript">
    
    	var theText=["Text one","Text two","Text three", "Text four"]; // Build the array of text
    	var arrayRows = theText.length; //Get the length of the array (Note: This starts at 1 not 0 like the array)
    	var i=0; //Set a counter
    
    	function znext() {
    		if (i == (arrayRows-1)) {
    			i = 0;
    		}else {
    			i++;
    		}
    		$("#textHere").fadeOut("slow", function(){ 
    			document.getElementById('textHere').innerHTML =theText[i];
    			
    			$("#textHere").fadeIn("slow");
    		});
    	}	
    		
    	function zprev() {
    			if (i <= 0) { // If its below 0 go to the max
    			i = arrayRows-1;
    		}else {
    			i--;
    		}
    		$("#textHere").fadeOut("slow", function(){  //Fade out the area
    			document.getElementById('textHere').innerHTML =theText[i]; //Change the text to the next piece of text
    			$("#textHere").fadeIn("slow"); // Fade in the area
    		});
    	}
    $(document).ready(function(){
    	document.getElementById('textHere').innerHTML =theText[i]; //Fill in the space with the first piece of text
    	$("#prevText").click(function(e) {
    		e.preventDefault(); // Stop the link being a link
    		zprev();
    	});
    	$("#nextText").click(function(e) {	
    			e.preventDefault();	
    			znext();
    	});
    time = setTimeout("znext()",  2000);
    });
    </script>
    Another thing is that you have called a "setTimeout"
    setTimeout runs the function specified ONCE after the given period of time.

    if you use "setInterval" instead ( time = setInterval("znext()", 2000); ),
    then it will continue run the function every given period of time, until you stop it.

  • Users who have thanked Lerura for this post:

    tomharto (06-02-2011)

  • #9
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Thats works geat thanks . What would be the best way to make that loop over so every 2 seconds it changes? Put it in a while true loop whats always true?


  •  

    Posting Permissions

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