0

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>
2
Contributors
6
Replies
7
Views
5 Years
Discussion Span
Last Post by Que336
1

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

Edited by Airshow: n/a

0

Whoops, I forgot to delete "this."

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

Airshow

0

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>
0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.