Log in

View Full Version : Resolved 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.


<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);
}



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

and in the body

I placed the following 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):


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


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