www.webdeveloper.com
Results 1 to 10 of 10

Thread: Alertbox not showing after I call a function

  1. #1
    Join Date
    Sep 2013
    Posts
    6

    Alertbox not showing after I call a function

    Hello guys.I just started to learn website building using HTML5 and Javascript.I am currently reading the Head First HTML5 programming.I was practicing canvas and am having some trouble with my code.

    Basically i just want to show different shapes like square,circle or triangle in a canvas depending on what the user selects in the dropdown.The HTML code is :

    HTML Code:
    <! doctype html>
    <html>
    <head>
    	<title>Practice Canvas</title>
    	<style>
    	canvas{
    	border : 1px solid black;
    	}
    	</style>
    	<script src="practice.js"></script>
    </head>
    <body>
    <canvas id="drawingBoard" width="600" height="200" ></canvas>
    <p>
    	<label for="shape">Select shape : </label>
    	<select id="shape" >
    		<option value="square">Square</option>
    		<option value="circle">Circle</option>
    		<option value="triangle">Triangle</option>
    	</select>
    	<br>
    	<p>
    	<input type="button" value="GO" id="goButton" ></input>
    	</p>
    </p>
    </body>
    </html>
    Now here is the problem with the JS code.When i just wrote

    Code:
    window.onload = function(){
    alert("Hello");
    	var goButton = document.getElementByID("goButton");
    	goButton.onclick = showDrawing;	
    }
    it works fine and i get the alert box saying hello.But when i add the showDrawing function i dont even get any alert box.Here is the new JS code:

    Code:
    window.onload = function(){
    alert("Hello");
    	var goButton = document.getElementByID("goButton");
    	goButton.onclick = showDrawing;	
    }
    
    function showDrawing(){
    	alert("Hello");
    	var canvas = document.getElementById("drawingBoard");
    	var context = canvas.getContext("2d");
    	
    	var selectObj = document.geElementById("shape");
    	var index = selectObj.selectedIndex;
    	var shapeSelected = selectObj[index].value;
    	
    	if(shapeSelected == "square"{
    		drawSquare(canvas,context);
    	}
    }
    So why am i not getting any alerts after i added the showDrawing function.

    Thanks in advance.

    PS:Its my first post here.I read the rules before posting but i am really sorry if i overlooked some rule.

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Check your error console, always.

    You have a syntax error on this line (capitalization problem with getElementById):
    Code:
    var goButton = document.getElementByID("goButton");

    And another one on this line (missing a parenthesis):
    Code:
    if(shapeSelected == "square"{

  3. #3
    Join Date
    Sep 2013
    Posts
    6
    thanks....btw what IDE would you suggest is best for web developing??

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    one more syntax error var selectObj = document.getElementById("shape")
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Sep 2013
    Posts
    6
    Quote Originally Posted by Padonak View Post
    one more syntax error var selectObj = document.getElementById("shape")
    yeah thanks...just downloaded aptana studio 3....otherwise its going to be difficult for me to find such errors.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    never heard about aptana studio... opera error console is my best friend ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Jun 2008
    Posts
    106
    Quote Originally Posted by Posiedon View Post
    thanks....btw what IDE would you suggest is best for web developing??
    I use Notepad++. Great program for what I do with it.



    Quote Originally Posted by Padonak View Post
    one more syntax error var selectObj = document.getElementById("shape")
    Ah, yes. So easy to miss syntax errors without an error console



    Quote Originally Posted by Posiedon View Post
    yeah thanks...just downloaded aptana studio 3....otherwise its going to be difficult for me to find such errors.
    Use your error console in your browser. It will tell you about syntax errors and what line they're on.

  8. #8
    Join Date
    Sep 2013
    Posts
    6
    ok...thnx guys...i didnt know about the error console....will try that now.

  9. #9
    Join Date
    Jul 2013
    Posts
    66
    WebStorm, by far. That is if you can invest a few bucks. I'm not sure about the Open-Source/Freeware field since I haven't use an editor from that sector in a while

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Quote Originally Posted by tenfold View Post
    I use Notepad++. Great program for what I do with it.
    the same about me )) GMTA
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles