[JeremyC]

Hello,

I am working a project for school in which I am trying to make a simple math game. When the user clicks the start button it will bring display a question and ask for an answer. What I want to to is when the user clicks the start button it will swap the button for to other buttons to move to the next question and one to restart the game. Which works fine, the problem is after the buttons are swapped.

How would I access a sub function from a buttons onclick event? I currently have onclick="return MathGame.resetForm();" but that throws an exception and I can't see where. What is the best way to go about this. Also this is my first attempt at using javascript in this manner so I'm probably going about it the wrong way.

function MathGame(form)
{
	var number;
	var answer;
	var problemArray = new Array(10)
	var arrayLength = problemArray.length;
	
	resetGame();
	switchButtons();
	document.getElementById("question").innerHTML = problemArray[0].questionString;
	return false;
	
	function resetGame()
	{
		for(var i = 0; i < arrayLength; i++)
		{
			problemArray[i] = new mathProblem();
		}
	}
	
	function switchButtons()
	{	
		var nextButton = "<input type=\"submit\" value=\"Next\" onclick=\"return MathGame.nextQuestion();\" /> &nbsp;";
		var resetButton = "<input type=\"submit\" value=\"Restart\" onclick=\"return MathGame.resetForm();\" />";
		document.getElementById("button").innerHTML = nextButton + resetButton;
	}
	
	function nextQuestion()
	{
		return false;
	}
	
	function resetForm()
	{
		var startButton = "<input type=\"submit\" value=\"Start\" onclick=\"return MathGame();\" />";
		document.getElementById("button").innerHTML = startButton;
		document.getElementById("question").innerHTML = "Click the Start button to test your math skills";
		return false;
	}
}

function mathProblem()
{
	var randomNumber1 = Math.floor(Math.random() * 20);
	var realAnswer = Math.floor(Math.random() * 20);
	var randomSwitchArg = Math.floor(Math.random() * 4);
	var questionString;
	var sum;
	var userAnswer;
	
	switch(randomSwitchArg)
	{
		case 0:
			//Addition
			this.sum = randomNumber1 + realAnswer;
			this.questionString = "Addition: " + randomNumber1 + " + x = " + this.sum + ". What is x?";
			break;
		case 1:
			// subtraction
			this.sum = randomNumber1 - realAnswer;
			this.questionString = "Subtraction: " + randomNumber1 + " - x = " + this.sum + ". What is x?";
			break;
		case 2:
			//multiplcation
			this.sum = randomNumber1 * realAnswer;
			this.questionString = "Multiplication: " + randomNumber1 + " * x = " + this.sum + ". What is x?";
			break;
		case 3:
			//division
			this.sum = randomNumber1 * realAnswer;
			this.questionString = "Division: " + randomNumber1 + " / x = " + this.sum + ". What is x?";
			break;
	}
}

<form method="post" action="">
    <p id="question">
        Click the Start buttont to test your math skills.
    </p>
    <p>
        <input type="text" size="4" /> <br />
    </p>
    <p id="button">
        <input type="submit" value="Start" onclick="return MathGame();" />
    </p>							
</form>

This post has been edited by JeremyC: 11 October 2011 - 09:05 AM

[Dormilich]

you can’t separately access a function inside of another function. what you would need are objects. something like

var MathGame = {
    problemArray : [],
    startGame : function() {
        // …
    },
    resetGame : function() {
        // …
    }
}

this way both startGame() and resetGame() have access to problemArray.

This post has been edited by Dormilich: 11 October 2011 - 10:37 AM

[Atli]

Hey.

The reason you are getting an exception there is because MathGame is a function without a property called resetForm. The function by that name which you define within the MathGame function is not accessible outside the function. At least not when defined like that.

What you want to be doing is one of these methods:

• Use the MathGame function with the new keyword to create an object, and then call on properties of that object.
  

  function MathGame()
  {
  	this.switchButtons = function() {
  		// etc...
  	}
  	
  	this.resetForm = function() {
  		// etc...
  	}
  }
  var MathGameObj = new MathGame();
  
  

  
  Then you can refer to the MathGameObj in your event callbacks to call those functions, like: onclick="MathGameObj.resetForm();.
  
  
  
• You can also define MathGame as an object with the properties pre-set, sort of like a "Static" class in OOP languages like PHP or C#. Then you can call the functions like you do in your code. Note, however, that it is an object, not a function, so it has no actual function body to be called, only properties.
  

  var MathGame = {
  	"resetForm" : function() {
  		// etc...
  	},
  	
  	"switchButtons " : function() {
  		// etc...
  	}
  }
  
  

  
  
  
  
• Finally, and what I would personally prefer: you can use DOM to create the elements, in which case you can set event callbacks to local functions without having to call the parent from the global scope. This would allow you to define your whole application in an anonymous function, perhaps as a callback to the window load event.
  

  window.addEventListener("load", function() 
  {
  	// Get references to the HTML elements that you
  	// will be interacting with. These will be available
  	// in all the functions defined below.
  	var buttonContainer = document.getElementById("button");
  	var questionContainer = document.getElementById("question");
  	
  	var problemArray = [];
  	var arrayLength = 10;
  	
  	// This is what would start the game, and the function
  	// your "Start" button is going to call when clicked.
  	var start = function() {
  		for(var i = 0; i < arrayLength; i++) {
  			problemArray[i] = new mathProblem();
  		}
  		switchButtons();
  		questionContainer.innerHTML = problemArray[0].questionString;
  	}
  	
  	var switchButtons = function() 
  	{
  		// Create a new <input> element for each button
  		// and set the properties on them.
  		var nextButton = document.createElement("input");
  		nextButton.type = "submit";
  		nextButton.value = "Next";
  		
  		var resetButton = document.createElement("input");
  		resetButton.type = "submit";
  		resetButton.value = "Restart";
  		
  		// This is the equivelant to setting the "onclick"
  		// properties on the actual HTML element, only this
  		// makes it far easier to deal with in your code.
  		nextButton.addEventListener("click", nextQuestion, true);
  		resetButton.addEventListener("click", resetForm, true);
  		
  		// Clear out the old elements from the container
  		// element, and then append the two new <input>
  		// elements to it.
  		buttonContainer.innerHTML = "";
  		buttonContainer.appendChild(nextButton);
  		buttonContainer.appendChild(resetButton);
  	}
  	
  	var nextQuestion = function() 
  	{
  		console.log("Next question...");
  	}
  	
  	var resetForm = function() 
  	{
  		var startButton = document.createElement("input");
  		startButton.type = "submit";
  		startButton.value = "Start";
  		startButton.addEventListener("click", start, true);
  		
  		buttonContainer.innerHTML = "";
  		buttonContainer.appendChild(startButton);
  		
  		questionContainer.innerHTML = "Click the Start button to test your math skills.";
  	}
  	
  	// Initialize the form, so clicking the Start button
  	// has the desired effect.
  	resetForm();
  }, true);
  
  

There are of course other ways to do this, but that's what I would start with for something like this.

[JeremyC]

Thank you both, especially Atli, that was way more of an answer than I was expecting. I'm probably going to scrap most of what I have now that I have a better idea of how things work with javascript.

This post has been edited by JeremyC: 11 October 2011 - 11:37 AM