can't get value from dynamic select drop down

Hi I have a problem with retrieving first populated, than selected by user quantity from the select dropdown menu.
I have several the same numeric type of menus. They contain values 0-20.
Event onchange causes the selected number to be displayed in an html div. However, if I try to get the number back from div for my calculations, it doesn't work.
I spent hours on it, any help greatly appreciated....

function showNumber(selectId, divNumber) {


var select = document.getElementById(selectId);
var noItems = document.getElementById(divNumber);


for (var i = 0; i <= 20; i++) {


var option = document.createElement('option');
option.innerHTML = i;
option.value = i;


select.appendChild(option);
}


select.onchange = function () {
var noZero = select.value;
if (noZero > 0) {
noItems.innerHTML = noZero;
} else noItems.innerHTML = " ";
};
}






function showDivs(){
showNumber('item1', 'div1');
showNumber('item2', 'div2');
showNumber('item3', 'div3');
showNumber('item4', 'div4');
}

etc.

 

Neither "select" or "noitems" will exist by the time your handler function runs, as they are local vars to showNumber. When you create a new function inline like that your local vars in the creating function will not exist inside it.

Instead of select.value you should be using this.value and/or an element result handler (since IE and RoW handle this differently) -- and you'll need to somehow store the target element to be changed so it exists in the scope of the result. Easiest way to do that would be to extend each select element's object with a noItems property.

Something like:

function showNumber(selectId, divNumber) { with (document) {
	var select = getElementById(selectId);
	select.noItems = getElementById(divNumber);

	for (var i = 0; i <= 20; i++) {
		var option = createElement('option');
		option.innerHTML = i;
		option.value = i;
		select.appendChild(option);
	}

	select.onchange = function (e) {
		if (!e) var e=window.event;
		target = e.target ? e.target : e.srcElement;
		target.noItems.innerHTML = ( target.value>0 ? target.value : ' ' );
	};
}}

Code (markup):

It adds noItems to the select as a pointer to the DIV. The function gets changed so that it pulls the event, then determines the element that triggered the event.

I'd also suggest looking into using the DOM to create the text instead of innerHTML. It's a bit more code, but it is often faster when it comes to re-rendering the changes to the page.

 

Just tested it, and modified it to use the DOM instead of InnerHTML... and leveraged 'with' to keep the code size manageable and legible.

function showNumber(selectId, divNumber) { with (document) {
	var select = getElementById(selectId);
	select.noItems = getElementById(divNumber);

	for (var i = 0; i <= 20; i++) {
		var option = createElement('option');
		option.appendChild(createTextNode(i));
		option.value = i;
		select.appendChild(option);
	}

	select.onchange = function (e) {
		if (!e) var e=window.event;
		with (e.target ? e.target : e.srcElement) {
			while (noItems.firstChild) noItems.removeChild(noItems.firstChild);
			noItems.appendChild(createTextNode(value>0 ? value : ' '));
		}
	};
	
}}

Code (markup):

Which will also actually work in a XHTML doctype when/if a renderer up and decides to actually use XML processing -- something InnerHTML falls flat on it's face for.