1 Replies - 980 Views - Last Post: 17 May 2012 - 10:27 PM

#1 Makdaddy  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 32
  • Joined: 10-November 10

function inside a function in javascript

Posted 17 May 2012 - 08:30 PM

The problemim im having is calling a function within a function 

function start(){
 animals();
 
}
 //window.onload = start;
 
//define global variables!
 var ovrBtn = false; //ovrBtn will be set to true if a button is clicked
 var imgs = new Array;
 var imgs2 = new Array;
 var imgs3 = new Array;
 var pos = 0; //counter to keep track of where we are in the array
 
function animals(){
 //assign a click event handler to each of the images
 imgs = document.querySelectorAll(".imgbox img");
 for(var j=0;j<imgs.length;j++){
 //onclick calls the function to make the lightbox
 imgs[j].onclick = makeLightbox;
 //give each of the image tags an id (a number)
 }
 }
 
//function used to create the lightbox
 function makeLightbox(){
 //create the overlay div
 var overlay = document.createElement("div");
 

//give it an id
 overlay.id = "overlay";
 

//get the wrapper div (so we can insert the overlay before it)
 

var wrapDiv = document.querySelector("#wrapper");
 //place the overlay inside the body, before the wrapper
 document.querySelector("body").insertBefore(overlay,wrapDiv);
 


//onclick function to the overlay to make it destroy itself
 overlay.onclick = totalExistanceFailure;
 
//create the elements that go inside of the overlay div:
 //a container element (called 'boxer'), a previous button div,
 //the image object, and a next button div
 

var boxer = document.createElement("div");
 boxer.id = "boxer";
 


overlay.appendChild(boxer);
 
//create the elements inside the container (boxer)
 var prev = document.createElement("div");
 


var img = document.createElement("img"); 




var next = document.createElement("div");
 
//give the back and next buttons ids
 prev.id = "btnPrev";
 next.id = "btnNext";
 


//call the function to get the image (pass it the current image)
 //store the value returned in the variable name
 var name = getImage(this);
 
//add the filename as the source for the new images
 img.src = "images/" + name;
 
//add these elements to the container div (boxer)
 boxer.appendChild(prev);
 boxer.appendChild(img);
 boxer.appendChild(next);
 
//add an onclick function to the buttons
 prev.onclick = goPrevious;
 next.onclick = goNext;
 
//set pos to be the id of the image clicked
 pos = this.id;
 }
 





//called by the next and previous buttons
 function goPrevious(){
 //set the global variable ovrbtn to true so the lightbox doesn't close
 ovrBtn = true;
 
//change pos (go backwards)
 pos--;
 //if pos is less than 0, send itback to the top of the array
 if(pos < 0){
 pos = imgs.length - 1; //length less 1 for the last position 
}
 
//get the larger image
 var bigImage = getImage(imgs[pos]);
 
//replace the current image
 document.querySelector("#boxer img").src = "images/" + bigImage;
 }
 
function goNext(){
 //set the global variable ovrbtn to true so the lightbox doesn't close
 ovrBtn = true;
 
//change pos, our position in the array
 pos++;
 //check to see if we are beyond the last position of the array
 //if we are, reset pos to 0, the first position
 if(pos == imgs.length){
 pos = 0; 
}
 
//get the name of the larger image
 var bigImage = getImage(imgs[pos]);
 
//replace the current image with the new one
 document.querySelector("#boxer img").src = "images/" + bigImage;
 
}
 
//gets the name of the larger image based on the name of the smaller image
 //currentImage is the clicked on small image (passed when the function
 //is called)
 function getImage(currentImage){
 //get the name of the new image from the name of the old image
 var imgsrc = currentImage.src;
 var slash = imgsrc.lastIndexOf("/") + 1;
 var end = currentImage.length;
 var name = imgsrc.substring(slash,end);
 //send the new name back to where the function was called from
 return name;
 }
 
//function to remove the overlay div
 function totalExistanceFailure(){
 //check to see if ovrBtn is true or not
 if(ovrBtn == false){
 this.parentNode.removeChild(this);
 }else{
 //if it is true, set it back to false
 ovrBtn = false; 
}
 }
 

window.onload = awesome;
 
//declare globals
 var theForm;
 
function awesome(){
 




//onclick for submit button
 document.querySelector("#btnSubmit").onclick = processForm;
 

//onblur functions for text fields
 document.querySelector("#charName").onblur = checkName;
 document.querySelector("#email").onblur = checkEmail;
 
//get the whole form
 theForm = document.querySelector("#yourChar");
 


}
 //function that processes the information in the form
 function processForm(){
 
//alert(theForm.email.value);
 
//set an error message variable
 var msg = "";
 

//validate the name!
 //call the function that handles name validation (it will return true if there
 //was an error)
 msg = checkName();
 
//validate the email!
 msg = checkEmail();
 
return false;
 
}
 


//check the name field
 function checkName(){
 //rules: cannot be less than 2 characters or more than 50
 // cannot have numbers
 var namefield = document.querySelector("#charName");
 
var msg="";
 var spaces=false;
 var numbers=false;
 var counter=0;
 var words=false;
 


var name = theForm.charName.value; //loop through the value of the entire field, looking for numbers and spaces 11 //trim removes leading and trailing spaces name = trim(name); 

//loop through the value of the entire field, looking for numbers and spaces
 //also count the number of characters between spaces
 for(var q=0;q<namefield.value.length;q++){
 //if a space is found (after trimming) set the spaces variable to true
 if(namefield.value.substring(q,q+1)==" "){
 spaces = true;
 //since we've found a space, there should be more than one word (provided you have used the trim function)
 if(counter<2){
 //if the counter is less than 2, then the word that came before the space has less than 2 characters in it
 words = true; 
}
 //reset the counter (-1 so when we count up below it starts again at 0)
 counter = -1;
 }else if(isNaN(namefield.value.substring(q,q+1))==false){
 //isNaN returns false if you find a number
 numbers = true;
 }
 //for each character, count up by 1
 counter += 1; 
}
 //after the loop, check the values of the variables
 if(numbers == true){
 msg+= "No Numbers!"; 
}
 if(spaces == false){
 msg+= "More than one word please!\n"; 
}
 if(words == true){
 msg += "Words must have more than one character!\n";
 }
 //|| (double pipeline) is 'or'
 if(name.length < 2 || name.length > 50){
 msg += "Name must be between 2 and 50 characters. ";
 
}
 

//check for an error message
 if(msg != ""){
 theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="error">' + msg + '</span>';
 //have the form return true for the play button
 return true;
 }else{
 theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="correct">A good, strong name.</span>';
 }
 
return false; 
}
 
//check the email
 function checkEmail(){
 //rules: must have @ symbol, must have . after @
 // only one @ symbol, at least one .
 // the last . must be at least two characters from the end
 // the @ cannot be the first character
 var email = theForm.email.value;
 
//get the positions of various things in the email
 var firstAt = email.indexOf("@");
 var lastAt = email.lastIndexOf("@");
 var firstDot = email.indexOf(".");
 var lastDot = email.lastIndexOf(".");
 var wrongEmail = false;
 
//check for @ symbol (can't be first, must be only one)
 if(firstAt == 0 || firstAt == -1 || firstAt != lastAt){
 //firstAt == 0: @ is the first character
 //firstAt == -1: no @ symbol found
 //firstAt != lastAt: more than one @
 wrongEmail = true;
 }
 
//check for . symbol (must be at least 1, 1 must come after last @,
 //must be at least 2 characters after last .
 if(firstDot == -1 || lastDot < lastAt || (lastDot >= email.length-2) ){
 //firstDot == -1: no . found
 //lastDot < lastAt: no . after @
 //lastDot >= email.length-2: less than 2 characters after last dot
 wrongEmail = true;
 }
 
//check for email error found
 if(wrongEmail == true){
 theForm.email.parentNode.childNodes[5].innerHTML = '<span class="error">Please enter a valid email address.</span>';
 return true;
 }else{
 theForm.email.parentNode.childNodes[5].innerHTML = '<span class="correct">What a lovely email.</span>'; 
return false; 
}
 
}
 


function submitButton(){
 

var validation = true;
 validation= checkName;
 validation = checkEmail;
 

if (validation == true){
 return false; 
}
 


}
 


I wantto call function animals within the function awsome. I have a lightbox and a form on one html page. But because I used 2 window.onload functions it conflicts with each other. I was told tocomment out //window.onload = start; which I did then and call the function animals() from inside the function awesome() Thats what my javascript teacher told me 2 do. Im just not sure how to go about calling the function animals within the function awsome

I tried function animals(){
}

Im just not sure how to do that. Ive looked around and tried different things but haven'tgot it 2 work. It seems simple but can't get it

Is This A Good Question/Topic? 0
  • +

Replies To: function inside a function in javascript

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: function inside a function in javascript

Posted 17 May 2012 - 10:27 PM

View PostMakdaddy, on 18 May 2012 - 05:30 AM, said:

I wantto call function animals within the function awsome. I have a lightbox and a form on one html page. But because I used 2 window.onload functions it conflicts with each other. I was told tocomment out //window.onload = start; which I did then and call the function animals() from inside the function awesome() Thats what my javascript teacher told me 2 do. Im just not sure how to go about calling the function animals within the function awsome

that’s where Event Listeners come in, with them you can call as many handler functions on one event as you like
// W3C compliant
window.addEventListener("load", animals, false);
window.addEventListener("load", awesome, false);

calling one function inside another is like calling a function in global scope. the only thing to remember is the correct scope (the "inner" function must be defined in a parent scope to be known to the "outer" function)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1