Results 1 to 4 of 4

Thread: [RESOLVED] [JavaScript] Event fires when adding handler

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Resolved [RESOLVED] [JavaScript] Event fires when adding handler

    Didn't know how to title this because as y'all know I come from a vb.net background and don't really know the terminology for JS. Anyways, I'm having an issue whenever I setup my handler for two buttons onClick event.

    What is suppose to happen is when the webpage loads, it's suppose to get the body's id and convert that to a number. From there it sets the previous and next webpage buttons at the bottom of my webpage and by set I mean it sets the inner HTML and tells it where to navigate to.

    However, whenever my page loads, it automatically navigates to the next webpage and I'm not sure why. This is my current JS:
    Code:
    var previousUrl;
    var nextUrl;
    window.onload = function() {
    	var urls = ["ide.html", "projects.html"];
    	var names = ["The Integrated Developing Environment", "Type of Projects", "Starting a New Project", "Option Strict", "Declaring Variables", "Running Your Code", "Output", "Input", "Comment", "Arithmetic"];	
    	var id = Number(document.body.id);
    	
    	previousUrl = urls[id - 1];
    	nextUrl = urls[id - 1];
    	
    	//Hide the previous or next button
    	//Depending on if the id is the first or last id
    	if (id == 0) {
    		document.getElementById("btnPrevious").style.visibility = "hidden";
    		previousUrl = "";
    		
    		//Only use the next button
    		document.getElementById("btnNext").innerHTML = "Go forward to '" + names[id + 1] + "'"
    		
    	} else if (id == urls.length) {
    		document.getElementById("btnNext").style.visibility = "hidden";
    		nextUrl = "";
    		
    		//Only use the previous button
    		document.getElementById("btnPrevious").innerHTML = "Go back to '" + names[id - 1] + "'"
    		
    	} else {
    		//Use both buttons
    		document.getElementById("btnPrevious").innerHTML = "Go back to '" + names[id - 1] + "'"
    		document.getElementById("btnNext").innerHTML = "Go forward to '" + names[id + 1] + "'"
    	}
    	
    	//Add the handlers
    	document.getElementById("btnPrevious").onclick = btnPrevious_Click();
    	document.getElementById("btnNext").onclick = btnNext_Click();
    }
    
    function btnPrevious_Click() {
    	if (previousUrl != "") {
    		window.location.href = previousUrl;
    	}
    }
    
    function btnNext_Click() {
    	if (nextUrl != "") {
    		window.location.href = nextUrl;
    	}
    }
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: [JavaScript] Event fires when adding handler

    Hard to know what's going on here without seeing the HTML that goes with this.

    A few thing that I would change:

    Use parseInt instead of Number.

    Change to strict equality comparison operators, since you can be sure that you are always comparing int with int, or string with string. Removes the need for type conversion that comes with using the normal comparison operators.

    Otherwise, you could get by without the parseInt conversion and just check for
    JavaScript Code:
    1. document.body.id == urls.length
    because ("10" == 10) will return true, but ("10" === 10) will return false.

    --

    You are missing some semicolons at the end of a few lines.

    --

    Make sure you're using HTML5 doctype:
    html Code:
    1. <!doctype html>
    HTML 4.01 required the id attribute to start with an alpha character, among other restrictions, but these have been relaxed in HTML5.

    --

    Check your JavaScript code with a linting tool such as JSLint. This will pick up any errors in your code (eg. the missing semicolons). At minimum, you would want to run it with "Assume a browser: true".

    jsbeautifier.org is another useful online tool to make ugly code readable.

    --

    Lastly, using an online tool like jsfiddle, jsbin, or codepen.io can really help to provide an interactive example of your HTML or JavaScript problem.

    Example using your code: http://jsfiddle.net/72sz57m1/
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [JavaScript] Event fires when adding handler

    Hard to know what's going on here without seeing the HTML that goes with this.
    I'm sorry, I didn't know if the HTML was relevant or not so I just didn't post it.

    Use parseInt instead of Number.
    I would like to change to that, however I do have a question about the second parameter; the radix argument is a bit confusing.

    Change to strict equality comparison operators
    Done.

    You are missing some semicolons at the end of a few lines.
    Thanks for catching that, like I said I come from a VB.Net background and the semi-colons still throw me off.

    Make sure you're using HTML5 doctype
    Yep, I am.

    Check your JavaScript code with a linting tool such as JSLint. This will pick up any errors in your code (eg. the missing semicolons). At minimum, you would want to run it with "Assume a browser: true".
    I've tried JSLint in the past, but like in this case it throws an error saying that there should only be 1 space between function and ( in my onload line, whenever I add one space it still gives me the same error, even after I tell it to tolerate ugly whitespaces. So I get all sorts of errors like that.

    I did figure out my problem. I was setting the OnClick events like this:
    Code:
    document.getElementById("btnPrevious").onclick = btnPrevious_Click();
    document.getElementById("btnNext").onclick = btnNext_Click();
    The issue with that is whenever I have the parenthesis there, it actually calls the function. So I removed the parenthesis so that all it does is setup the function and not call it.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  4. #4
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: [RESOLVED] [JavaScript] Event fires when adding handler

    The radix argument to parseInt specifies the base that your string number is in. Always good to specify it to remove any confusion as different JS implementations might use a default radix other than 10.

    eg. radix 10 == base 10 (decimal), radix 16 == hex, radix 8 == octal, radix 2 == binary.

    so parseInt("123", 10) == 123 (decimal), while parseInt("123", 16) == 291 (decimal).

    I would also recommend reading up on closures, as I'm not sure they exist in VB and can cause problems with memory leaks if not used correctly. This is what tripped you up with the function parentheses. Calling the function name without parentheses (ie. not executing the function) will just return a reference to the function.

    This allows you to assign function references to variables and create anonymous functions, among other things.

    https://en.wikipedia.org/wiki/Closur...programming%29
    https://developer.mozilla.org/en-US/...Guide/Closures
    https://stackoverflow.com/questions/...-closures-work
    https://en.wikipedia.org/wiki/Immedi...ion_expression
    http://benalman.com/news/2010/11/imm...on-expression/
    Last edited by tr333; Aug 17th, 2014 at 07:21 PM.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

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



Click Here to Expand Forum to Full Width