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 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2014
    Location
    Louisiana
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Issues setting up OnClick() event for elements in OnLoad() event

    I'm trying to setup the OnClick() event for multiple canvases, but whenever I debug JavaScript using Firebug and setup breakpoints on the lines where the event should be setup, the line doesn't execute. Here is my code:
    Code:
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<link rel="stylesheet" type="text/css" href="index.css">
    		<meta content="Dday9" name="author" />
    		<meta content="Play Tic-Tac-Toe online with the power of HTML5" name="description" />
    		<meta content="tic-tac-toe, html5, free, online, game" name="keywords" />
    		<script src="index.js"></script>
    		<title>Tic Tac Toe</title>
    	</head>
    
    	<body>
    
    		<!-- Win/Lose information -->
    		<table id="stats">
    			<tr>
    				<td class="rightAlign">Player Wins:</td>
    				<td><span id="playerWins"></span></td>
    			</tr>
    			<tr>
    				<td class="rightAlign">CPU Wins:</td>
    				<td><span id="cpuWins"></span></td>
    			</tr>
    			<tr>
    				<td class="rightAlign">Ties:</td>
    				<td><span id="ties"></span></td>
    			</tr>
    		</table>
    
    		<table id="grid">
    			<!-- Top Row -->
    			<tr>
    				<td><canvas class="column0 row0" height="50" id="00" width="50"/></td>
    				<td><canvas class="column1 row0" height="50" id="01" width="50"/></td>
    				<td><canvas class="column2 row0" height="50" id="02" width="50"/></td>
    			</tr>
    			
    			<!-- Middle Row -->
    			<tr>
    				<td><canvas class="column0 row1" height="50" id="10" width="50"/></td>
    				<td><canvas class="column1 row1" height="50" id="11" width="50"/></td>
    				<td><canvas class="column2 row1" height="50" id="12" width="50"/></td>
    			</tr>
    			
    			<!-- Bottom Row -->
    			<tr>
    				<td><canvas class="column0 row2" height="50" id="20" width="50"/></td>
    				<td><canvas class="column1 row2" height="50" id="21" width="50"/></td>
    				<td><canvas class="column2 row2" height="50" id="22" width="50"/></td>
    			</tr>
    		</table>
    
    	</body>
    
    </html>
    Code:
    // Globals
    var playerTurn;
    var playerWins;
    var cpuWins;
    var ties;
    
    window.onload = function() {
    	// Set the default values for the globals(except for playerTurn, we do that in NewGame())
    	playerWins = 0;
    	cpuWins = 0;	
    	ties = 0;
    
    	// Update the statistics
    	UpdateStats();
    	
    	// Setup handlers for the controls
    	// Upper row
    	document.getElementById("00").onclick = canvas_Click();
    	document.getElementById("01").onclick = canvas_Click();
    	document.getElementById("02").onclick = canvas_Click();
    
    	// Middle row
    	document.getElementById("10").onclick = canvas_Click();
    	document.getElementById("11").onclick = canvas_Click();
    	document.getElementById("12").onclick = canvas_Click();
    
    	// Bottom row
    	document.getElementById("20").onclick = canvas_Click();
    	document.getElementById("21").onclick = canvas_Click();
    	document.getElementById("22").onclick = canvas_Click();
    
    	// Start a new game
    	NewGame();
    }
    
    function canvas_Click() {
    	var context = this.getContext("2d");
    	ctx.fillStyle = "#FF0000";
    	ctx.fillRect(0,0,this.Width,this.Height);
    }
    
    function ClearCanvas(id) {
    	var sender = document.getElementById(id)
    	var context = sender.getContext("2d");
    	context.clearRect(0, 0, sender.width, sender.height);
    }
    
    function ChangeTurn() {
    	// set playerTurn to what it is not
    	playerTurn = !playerTurn;
    }
    
    function UpdateStats() {
    	document.getElementById("playerWins").innerHTML=playerWins;
    	document.getElementById("cpuWins").innerHTML=cpuWins;
    	document.getElementById("ties").innerHTML=ties;
    }
    
    function NewGame() {
    	// Player1 always goes first
    	playerTurn = True;
    	
    	// Update the statistics
    	UpdateStats();
    	
    	// Clear any existing canvases
    	ClearCanvas("00")
    	ClearCanvas("01")
    	ClearCanvas("02")
    	ClearCanvas("10")
    	ClearCanvas("11")
    	ClearCanvas("12")
    	ClearCanvas("20")
    	ClearCanvas("21")
    	ClearCanvas("22")
    }

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Code:
    document.getElementById("22").onclick = canvas_Click();
    those brackets at the end there call the function immediately
    Code:
    document.getElementById("22").onclick = canvas_Click;
    sets up a reference to the function, making sure it will be called onclick

  • #3
    New Coder
    Join Date
    Jan 2014
    Location
    Louisiana
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah ok. I come from a VB.Net background, so I thought you had to have the parenthesis at then end of the routine in order to set it up. I'm not at my home right now, but whenever I'll get the chance I'll try to remove all the parenthesis and see if that works.

  • #4
    New Coder
    Join Date
    Jan 2014
    Location
    Louisiana
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've had the chance to get back to my project and make the appropriate adjustments. So I removed the parenthesis off in the OnLoad() event and nothing happened whenever I clicked on the canvas. So I tried changing my OnClick() event to this:
    Code:
    function canvas_Click() {
    	var sender = document.getElementById(this.id);
    	var context = sender.getContext("2d");
    	ctx.fillStyle = "#FF0000";
    	ctx.fillRect(0,0,sender.Width,sender.Height);
    }
    And nothing happens whenever I click on the canvas either. However, after I debug with Firebug, I am able to determine that the onclick event is being setup. So it leads me to believe that I'm doing something wrong inside of the event.

    Edit - That's what I get for copying and pasting code from W3Schools. I forgot to change my variable name from ctx to sender. I also had to specify the width and height rather than getting the width and height from the sender.
    Last edited by dday9; 07-28-2014 at 05:36 PM.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!DOCTYPE html>
    <html>
     <head>
      <link rel="stylesheet" type="text/css" href="index.css">
      <meta content="Dday9" name="author" />
      <meta content="Play Tic-Tac-Toe online with the power of HTML5" name="description" />
      <meta content="tic-tac-toe, html5, free, online, game" name="keywords" />
      <script>// Globals
    var playerTurn;
    var playerWins;
    var cpuWins;
    var ties;
    window.onload = function() {
     // Set the default values for the globals(except for playerTurn, we do that in NewGame())
     playerWins = 0;
     cpuWins = 0; 
     ties = 0;
     // Update the statistics
     UpdateStats();
     
     // Setup handlers for the controls
     // Upper row
     document.getElementById("00").onclick = canvas_Click;
     document.getElementById("01").onclick = canvas_Click;
     document.getElementById("02").onclick = canvas_Click;
     // Middle row
     document.getElementById("10").onclick = canvas_Click;
     document.getElementById("11").onclick = canvas_Click;
     document.getElementById("12").onclick = canvas_Click;
     // Bottom row
     document.getElementById("20").onclick = canvas_Click;
     document.getElementById("21").onclick = canvas_Click;
     document.getElementById("22").onclick = canvas_Click;
     // Start a new game
     NewGame();
    }
    this
    function canvas_Click() {
     var ctx = this.getContext("2d");
     ctx.fillStyle = "#FF0000";
     ctx.fillRect(0,0,this.width,this.height);
    }
    function ClearCanvas(id) {
     var sender = document.getElementById(id)
     var context = sender.getContext("2d");
     context.clearRect(0, 0, sender.width, sender.height);
    }
    function ChangeTurn() {
     // set playerTurn to what it is not
     playerTurn = !playerTurn;
    }
    function UpdateStats() {
     document.getElementById("playerWins").innerHTML=playerWins;
     document.getElementById("cpuWins").innerHTML=cpuWins;
     document.getElementById("ties").innerHTML=ties;
    }
    function NewGame() {
     // Player1 always goes first
     playerTurn = True;
     
     // Update the statistics
     UpdateStats();
     
     // Clear any existing canvases
     ClearCanvas("00")
     ClearCanvas("01")
     ClearCanvas("02")
     ClearCanvas("10")
     ClearCanvas("11")
     ClearCanvas("12")
     ClearCanvas("20")
     ClearCanvas("21")
     ClearCanvas("22")
    }</script>
      <title>Tic Tac Toe</title>
     </head>
     <body>
      <!-- Win/Lose information -->
      <table id="stats">
       <tr>
        <td class="rightAlign">Player Wins:</td>
        <td><span id="playerWins"></span></td>
       </tr>
       <tr>
        <td class="rightAlign">CPU Wins:</td>
        <td><span id="cpuWins"></span></td>
       </tr>
       <tr>
        <td class="rightAlign">Ties:</td>
        <td><span id="ties"></span></td>
       </tr>
      </table>
      <table id="grid">
       <!-- Top Row -->
       <tr>
        <td>x<canvas class="column0 row0" height="50" id="00" width="50"/></td>
        <td>x<canvas class="column1 row0" height="50" id="01" width="50"/></td>
        <td>x<canvas class="column2 row0" height="50" id="02" width="50"/></td>
       </tr>
       
       <!-- Middle Row -->
       <tr>
        <td>x<canvas class="column0 row1" height="50" id="10" width="50"/></td>
        <td>x<canvas class="column1 row1" height="50" id="11" width="50"/></td>
        <td>x<canvas class="column2 row1" height="50" id="12" width="50"/></td>
       </tr>
       
       <!-- Bottom Row -->
       <tr>
        <td>x<canvas class="column0 row2" height="50" id="20" width="50"/></td>
        <td>x<canvas class="column1 row2" height="50" id="21" width="50"/></td>
        <td>x<canvas class="column2 row2" height="50" id="22" width="50"/></td>
       </tr>
      </table>
     </body>
    </html>
    </body>
    </html>

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Move the script to just before the </body> tag where almost all JavaScript belongs and you can get rid of the delay waiting for all the files the page needs to load by dropping the test for the load event.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,648 Times in 4,610 Posts
    Felgall means like this (with some of your ugly code cleaned up in the process):
    [code]
    <script type="text/javascript">
    // Globals
    var playerTurn = 0;
    var playerWins = 0;
    var cpuWins = 0;
    var ties = 0;

    // list control element ids
    var controls = ["00","01","02","10","11","12","20","21","22"];

    // Update the statistics
    UpdateStats();


    // Setup handlers for the controls
    for ( var c = 0; c < controls.length; ++c )
    {
    document.getElementById(controls[c]).onclick = canvas_Click;
    }

    // Start a new game
    NewGame();

    function canvas_Click() {
    var ctx = this.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,this.width,this.height);
    }
    function ClearCanvas(id) {
    var sender = document.getElementById(id)
    var context = sender.getContext("2d");
    context.clearRect(0, 0, sender.width, sender.height);
    }
    function ChangeTurn() {
    // set playerTurn to what it is not
    playerTurn = !playerTurn;
    }

    function UpdateStats() {
    document.getElementById("playerWins").innerHTML=playerWins;
    document.getElementById("cpuWins").innerHTML=cpuWins;
    document.getElementById("ties").innerHTML=ties;
    }
    function NewGame() {
    // Player1 always goes first
    playerTurn = True;

    // Update the statistics
    UpdateStats();

    // Clear any existing canvases
    for ( var c = 0; c < controls.length; ++c )
    {
    ClearCanvas(controls[c]);
    }

    }
    </script>
    </body>
    </html>

    JUST before the </body> tag!

    Clearly you need to add code to canvas_Click( ) that will (a) test for a player win or tie, (b) if neither of those, let the computer make a move and then test for computer win or tie. If any win or tie occurs, disable canvas_Click until the next game is started.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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