OnClick only works once...suicide being contemplated. HELP !!!



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>
```
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**
hey [@jsteb](/u/jsteb), i was struggling with this and i figured what is going on. the problem is with the action button. if you try with a regular button it will work. i think that should be clarified in the tutorial You could achieve this with a simple `for` loop:



```
var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

```

[JS Fiddle demo](https://jsfiddle.net/davidThomas/NX3ac/).


[JS Perf](https://jsperf.com/) comparison of both mine and [Sime Vidas' answer](https://jsperf.com/comparison-of-loops), run because I thought his looked a little more understandable/intuitive than mine and I wondered how that would translate into implementation. According to Chromium 14/Ubuntu 11.04 mine is somewhat faster, other browsers/platforms are likely to have differing results though.







**Edited** in response to comment from OP:



> 
> [How] do [I] apply this to more than one element?
> 
> 
> 



```
function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(target);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

```

[JS Fiddle demo](https://jsfiddle.net/davidThomas/NX3ac/1/).


And, finally (after quite a delay...), an approach extending the prototype of the `HTMLSelectElement` in order to chain the `populate()` function, as a method, to the DOM node:



```
HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min + 100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i <= settings.max; i++) {
        this.appendChild(new Option(i, i));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

```

[JS Fiddle demo](https://jsfiddle.net/davidThomas/NX3ac/148/).


References:


* [`node.appendChild()`](https://developer.mozilla.org/en/DOM/node.appendChild).
* [`document.getElementById()`](https://developer.mozilla.org/en/DOM/document.getElementById).
* [`element.innerHTML`](https://developer.mozilla.org/en/DOM/element.innerHTML). can you try with other dropdowns? if its working , nothing wrong with your code and something to do with that specific drop down. May be the function is executed before the document is ready.
Try to use document.ready function like this:



```
$( document ).ready(function() {
    $('#machines').change(function() {
        var $selected = $(this).find(':selected');
        $('#description').html($selected.data('description'));
    }).trigger('change');
});

``` nvm, i think it might be because i was force running it. i reopened the script and it appears to work. The problem is the response from the server, not your JavaScript. I ran the following code in the console on your page:



```
$.getJSON('data.json', function(data) { 
    console.log(data); 
});

        

        
        
        
 (adsbygoogle = window.adsbygoogle || []).push({});
 
        

    
```

The result looks like this:



  




 (adsbygoogle = window.adsbygoogle || []).push({});
 
  

 ![enter image description here](https://fooobar.com//img/b0b4666ec951695a00da8c82eb85e737.jpg)


As you can see, there is only one property in the returned object ( `mesta`
  




 (adsbygoogle = window.adsbygoogle || []).push({});
 
  

, an array with three elements).


You can confirm this by [visiting the file directly`data.json`
  




 (adsbygoogle = window.adsbygoogle || []).push({});](https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=) . Are you trying to return [Target] as [Target?]. Since the content types of the array don't match (and can't match), you get a runtime exception. Changed return type to [Target], especially since you always return something anyway.



  




 (adsbygoogle = window.adsbygoogle || []).push({}); Have you tried restarting your browser? for example, you can disable right click on images at your page:

```

$(document).ready(function() {
    $("img").on("contextmenu",function(){
       return false;
    }); 
}); 

``` [image] hschulze86:

it starts autocreating items

you’ve got simple mode set.

this invariably becomes really unhelpful, i would not recommend it even for new users.