Hi guys, please help me out with this. I'm seriously considering suicide. I have three buttons that load numbers into divs. The problem I'm having is that the buttons only seem to work once. Any idea as to why this is happening? You help will go a long way.

<html>
	<head>
    <script type="text/javascript">
    var easyGame = {		
		easy: [1,2,3],
		s: 1,
		
		easyLoad: function(){
			for(i=0;i<=this.easy.length;i++){
			document.getElementById(this.s).innerHTML=this.easy[i];
				this.s++;
			}
		}//end of easyLoad function
}//end of easy game
		
		var normalGame = {			
		normal: [4,5,6],
		s: 1,
		
		normalLoad: function(){
			for(i=0;i<=this.normal.length;i++){
			document.getElementById(this.s).innerHTML=this.normal[i];
				this.s++;
			}
		}//end of normalLoad function
}//end of normal game
		
		var hardGame = {		
		hard: [7,8,9],
		s: 1,
		
		hardLoad: function(){
			for(i=0;i<=this.hard.length;i++){
			document.getElementById(this.s).innerHTML=this.hard[i];
				this.s++;
			}
		}//end of hardLoad function
}//end of hard game
    
    </script>
	</head>
	<body onLoad="normalGame.normalLoad()">
		<div id="1"></div>
		<div id="2"></div>
		<div id="3"></div>
		<input type="button" value="easy" onClick="easyGame.easyLoad()"/>
        <input type="button" value="normal" onClick="normalGame.normalLoad()"/>
        <input type="button" value="hard" onClick="hardGame.hardLoad()"/>
	</body>

	
</html>

Recommended Answers

All 6 Replies

Reason: s starts at 1 and is incremented on first call, but is never reset. On seconds and subsequent calls s no longer starts at 1. s is actually unnecessary as you can use the loop counter i instead.

A more conventional way to do this sort of thing would be with a single function, not embedded in an object, and to control the detailed behaviour by passing parameter(s).

function loadGame(level){
	var values;
	switch(level){
		case 'hard':
			values: [7,8,9],
		break;
		case 'normal':
			values: [4,5,6],
		break;
		default://easy
			values: [1,2,3],
	}
	for(i=0;i<=this.values.length;i++){
		document.getElementById('n'+i).innerHTML=this.values[i];
	}
}
<div id="n0"></div>
	<div id="n1"></div>
	<div id="n2"></div>
	<input type="button" value="easy" onClick="loadGame('easy')"/>
	<input type="button" value="normal" onClick="loadGame('normal')"/>
	<input type="button" value="hard" onClick="loadGame('hard')"/>

Airshow

Whoops, I forgot to delete "this."

for(i=0;i<=values.length;i++){
		document.getElementById('n'+i).innerHTML=values[i];
	}

Airshow

Thank you so much for taking timeout to help a newbie. I like the idea you gave me but I just can't get it to work. Any idea what I'm doing wrong?

<html>
<head>
<script type="text/javascript">
function loadGame(level){
	var values;
	switch(level){
		case 'hard':
			values: [7,8,9];
		break;
		case 'normal':
			values: [4,5,6];
		break;
		default://easy
			values: [1,2,3];
	}
	for(i=0;i<=values.length;i++){
		document.getElementById('n'+i).innerHTML= values[i];
	}
}
</script>
</head>
	<body>
    <div id="n0"></div>
	<div id="n1"></div>
	<div id="n2"></div>
	<input type="button" value="easy" onClick="loadGame('easy')"/>
	<input type="button" value="normal" onClick="loadGame('normal')"/>
	<input type="button" value="hard" onClick="loadGame('hard')"/>
    </body>
</html>

Solved, I just copied the for statement into every case. Thank you so much for your help.

My fault, I didn't test the code. The statements in the cases should be values = [...] , not values : [...] .

Here it is working as I intended : http://jsfiddle.net/QH37E/1/

Airshow

Oh yeah, I didn't realise that lol. Thank you yet again. You are a legend.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.