javascript - Loop string get null -

i want output loop string. this's code:

html

<input id="items" type="text" value=""> <input id="start" type="text" value=""> <input id="end" type="text" value=""> <input id="btn" type="submit" value="generate"> <br> <br> <textarea id="output"></textarea> 

javascript

var items = document.getelementbyid('items').value; var = document.getelementbyid('start').value; var e = document.getelementbyid('end').value; var btn = document.getelementbyid('btn'); var output = document.getelementbyid('output');  btn.addeventlistener('click', function() {     for(i; < e; i++) {         output.value = items+'/'+i;     } }, false); 

how ouput 'pencil/1' until 'pencil/20' input value start , end? cause null value input use for.

the problem reading values of items, start , end on page load, not when clicking button. include inside click event , work better.

var btn = document.getelementbyid('btn'); var output = document.getelementbyid('output');  btn.addeventlistener('click', function() { var items = document.getelementbyid('items').value; var = document.getelementbyid('start').value; var e = document.getelementbyid('end').value;     for(i; < e; i++) {         output.value += items+'/'+i+'\n';     } }, false); 

http://jsfiddle.net/e1xsj4x2/ fiddle demonstrating this. correctly appends values text area rather overwriting existing value on each loop iteration.