JavaScript to load two lists triggered by buttons

**tomwaits4noman** · 02-28-2009, 05:53 PM

Hello I am looking to use javascript to bring a list of 7 items when I press a button on the page

the problem is that there are two lists so I need two buttons for each list.

e.g when press button A it brings up a list of nos 1 to 7
when you press button B it brings up a list of the days of the week

I was advised to use arrays and string queries, I made an attempt the code is provided below but I am not sure how to program the javascript to load the second list

thanks.

Code:

<script>
		var myArr = new Array("1", "2", "3", "4", "5", "6", "7");
		var urArr = new Array( Monday,Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday)


		function drawList(the_array, l_type) {
			the_type_open = "<" + l_type + ">";
			the_type_close = "</" + l_type + ">";
/*30*/
			the_string = the_type_open;

			for(i=0;i<the_array.length;i++) {
				the_string += "<li />" + the_array[i];				
			}
			
			the_string += the_type_close;
			document.getElementById("content").innerHTML = the_string; 
		//	alert(the_string);
		}

HTML Code:

</head>
<body onLoad="drawList(myArr, 'ul');">

and in the body

I placed the following code

HTML Code:

	<div id="content">
		<input type="text" id="name_textBox" value="Mary" /><button onClick="drawList();">Submit</button>
	</div>

**Nile** · 03-01-2009, 01:37 AM

Can you explain the whole process in which you're trying to do please? Thanks!

**tomwaits4noman** · 03-01-2009, 11:31 AM

Hi Nile what I trying to do and trying to explain in tech terms as I am not too familar with javascript

I want to apply an onbody load function to a button using java script when it is pressed it will bring up an unordered list array

I need a second button that when it is pressed will bring up a second list

so I have two arrays

and when a putton is pressed it will load the list

the code I have been given is

body onLoad="drawList(myArr, 'ul')

I hope this explains further

**Nile** · 03-01-2009, 04:11 PM

Maybe ths? (to long to highlight):

Code:

<script type="text/javascript">
var myArr = ["1", "2", "3", "4", "5", "6", "7"];
var urArr = ["Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

var dropList = function(me, arr){
  var offset = [me.offsetLeft, me.offsetTop];
  var dropDown = document.createElement("ul");
  dropDown.style.position = "absolute";
  dropDown.style.left = offset[0];
  dropDown.style.top = offset[1];
  for(x in arr){
    var child = document.createElement("li");
    var childText = document.createTextNode(arr[x]);
    dropDown.appendChild(child);
    child.appendChild(childText);
  }
  document.body.appendChild(dropDown);
  var a = true;
  me.onblur = function(){
    document.body.removeChild(dropDown);
  };
};
</script>
<input type="button" onclick="dropList(this, urArr);" value="Day"/><input type="button" onclick="dropList(this, myArr);" value="Number?"/>

**tomwaits4noman** · 03-02-2009, 10:34 AM

Thanks Nile
thats great really appreciate it

**Nile** · 03-02-2009, 10:20 PM

I noticed that the onblur for the close doesn't work for Chrome and Safari (applewebkit's problem?), so here is code that puts a "Close [x]" button at the top:

Code:

<script type="text/javascript">
var myArr = ["1", "2", "3", "4", "5", "6", "7"];
var urArr = ["Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

var dropList = function(me, arr){
  var offset = [me.offsetLeft, me.offsetTop];
  var dropDown = document.createElement("ul");
  dropDown.style.position = "absolute";
  dropDown.style.left = offset[0];
  dropDown.style.top = offset[1];
  var close = document.createElement("li");
  var closeLink = document.createElement("a");
  closeLink.href = "javascript: void(0);";
  closeLink.onclick = function(){
    document.body.removeChild(dropDown);
  }
  var closeText = document.createTextNode("[x] Close");
  dropDown.appendChild(close);
  close.appendChild(closeLink);
  closeLink.appendChild(closeText);
  for(x in arr){
    var child = document.createElement("li");
    var childText = document.createTextNode(arr[x]);
    dropDown.appendChild(child);
    child.appendChild(childText);
  }
  document.body.appendChild(dropDown);
  var a = true;
  me.onblur = function(){
    document.body.removeChild(dropDown);
  };
};
</script>
<input type="button" onclick="dropList(this, urArr);" value="Day"/><input type="button" onclick="dropList(this, myArr);" value="Number?"/>

It seems your topic is solved... Please set the status to resolved.. To do this:
Go to your first post ->
Edit your first post ->
Click "Go Advanced" ->
Then in the drop down next to the title, select "RESOLVED"

Thread: JavaScript to load two lists triggered by buttons

Thread Tools

Search Thread

JavaScript to load two lists triggered by buttons

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions