Create array of div History?

Wow, another wierd javascript question! Ok. I can’t alert the history array of the index page or use that arrays indexOf to read and write it to go back to predetermend conditional index of that array? If I could alert the history array and read the array elements then I might be able to write and go to one of the history array elements specificaly? So I might be able to use window onload to create an array that stores the classname of a div every time the divs classname is changed then go back in page history to the classname specified?:rolleyes:

Window Onload function


addEvent(window,'load',function(){
var f1=document.getElementById('f1');
var f1history=['product','htmlpage'];//create array of the classNames of 'f1' div?
},false);

var f1=document.getElementById('f1');
var sidebar=document.getElementById('sidebar');
addEvent(sidebar,'click',function(){
f1history.length+='f1.className';//add the current className of 'f1' to 'f1history' array?
},false);

var header=document.getElementById('header');
addEvent(header,'click',function(){
if((f1history.length>0)&&(f1history.length.indexOf('htmlpage')){
window.history=f1history[0];
/*
not sure that returning the className of 'f1' will work it should return the index number of 
f1history array! Because 'f1' divs className has to be 'product' and the window has to return to the last time 'f1's' className was 'product'
*/
},false);

That should explain what I’m trying to do, maybe not? Please let me know of any way to achieve the same proposed result:x

Well I was wrong again, you can alert window history length like so
Alert Window History Legth


var sidebar=document.getElementById('sidebar');
addEvent(sidebar,'click',function(){
alert(f1.className);}//alerts: either 'product' or 'htmlpage'
alert(window.history.length);}//alerts: '4'
,false); 

This alert showed me that the history of the page had not changed at all even after httprequest to change ‘f1’ innerHTML and className, so the window history array can’t help me.:nono: The problem is that after responceText alters ‘f1’ innerHTML the client can load an Object html page to ‘f1’ and change ‘f1’ className to ‘htmlpage’ which obstructs the view of an expanded div ‘f2’. So I need to delete the object in ‘f1’ before ‘f2’ expands by clicking on header in ‘f2’ called by viewcart().

Ok. It turns out that I realy need to create an array of the li elements clicked with the className ‘Item’. Every time one of the li items is clicked their id is added to the array so I’ll call it ‘products’. The ‘products’ array will be queried for the last item in that array ‘products[-1]’ when the header of a table in div ‘f2’ is clicked to expand the table and div ‘f2’ up and above div ‘f1’ and this function exists and works and is called ‘viewcart()’. The problem is that the client makes http requests that change the innerHTML of ‘f1’ by clicking different links that change ‘f1’. There are two types of changes with each element clicked that acctualy rewrite the className of ‘f1’. ‘f1 className product’ and ‘f1 className htmlpage’.

  1. ‘f1 className product’ uses get.php to change f1 innerHTML with Ajax
  2. ‘f1 className htmlpage’ appends an object containing static html pages on the server to f1 innerHTML

when ‘viewcart()’ is called it queries the className of ‘f1’ and can alert ‘You must return to the product page’+lastIndexOf.products. I would like to use a pseudo prompt that alters the innerHTML of ‘f1’ called f1prompt something like f1promt document create element prompt(‘You have to return to product page:’,lastIndexOf.products). What would be realy sweet is that when the client clicks the OK. button in ‘f1prompt’ the last li element className ‘item’ clicked is acctually clicked again without the client having to do it.
viewcart() with alert


//var items=[]; created with window onload or li element onclick??
//items+=this.id; add to items array with li onclick
function viewcart(){
var items=cartbody.rows.length;
if(f1.className=='htmlpage'){
alert('You must return to the last product page: Silver Jewelry.');
//works though 'Silver Jewelry' is static and doesn't click the Silver Jewelry link for the client
//f1prompt('You have to return to the last product page:',+lastIndexOf.products)
//would be perffect if clicking the OK. button in f1prompt would reclick the lastIndexOf 'products' array??
}
if(items<=1){//stops 'f2' expanding if client hasn't ordered an item
alert('You have not ordered an Item.   ');
}
if((f2.className=='register')&&(items>=2)){
f2.className='viewcheckout';
submitbutton.style.visibility='hidden';
printorder.style.visibility='hidden';
orderinfo.style.visibility='hidden';
header.className='header';
carttable.style.top='0px';
carthead.setAttribute('title','Click Header to Continue Shopping');
ordersum.setAttribute('title','Click to Continue Shopping');
getinvoice();
getorderdate();
}
else{
f2.className='register';
header.className='header2';
carttable.style.top='22px';
carthead.setAttribute('title','Click Header to View more of Your Order');
ordersum.setAttribute('title','Click to View more of Your Order');
}}

I’m pritty sure this methode can work so I’m going to set up a function that creates f1prompt but I’ll deffinatley need help with stripping the last indexOf.items array to add an onclick function to the Ok. button. Not to mention adding the id of the li element clicked to the blank items array or geting the last value added to that array:blush:
Any help greatly appreciated!!

Ok. The product array was created and a push of this.id in the onclick function is supposed to add it to the array. Unfortunatley when I use prompt ‘You must return to page’, products slice -1 the prompt returns ‘You must return to page’, Undefined.
The Sript Shortend


var products=new Array();//empty array
var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
for(i=0;i<sidebarli.length;i++){   
if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
sidebarli[i].onclick=function(){   
alert(this.id+': Is sending your request.');
EvalSound1();
var p=this.id;
products.push(P);//add to products??
//more
}}

function viewcart(){
var items=cartbody.rows.length;
if(f1.className=='htmlpage'){
prompt('You must return to product page: ',products.slice[-1]); //returns undefined may need '+' ??
//prompt('You must return to product page: ', +products.slice[-1]); returns 'NaN' ?
}

Ok. When I change prompt to alert products slice -1 the alert turns up undefined. Is there some security measure that causes this? No, it’s got to be a syntax error with the add to array/push or the + products slice -1???

Wierd Science. When I add alert products 0 to the onclick function it returns the correct value, if I alert products -1 it returns undefined. The prompt products slice 0 or -1 both return ‘Undefined’.

The Onclick with Alert products Array 0 & -1


var products=new Array();
var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
for(i=0;i<sidebarli.length;i++){   
if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
sidebarli[i].onclick=function(){   
alert(this.id+': Is sending your request.');
EvalSound1();
var p=this.id;
var pp=p.toString();//converted to string??
products.push(pp);
alert(products[0]);//returns 'silver' correctly?
alert(products[-1]); //returns 'undefined' didn't try adding two clicked items yet?

hi Heinz

could you please provide necessary html code ?

alert(products[-1]); //returns ‘undefined’ didn’t try adding two clicked items yet?

that’s because there is no element -1 in the array, array elements start from 0

<html>
<head>
<title>
</title>
<script type=“text/javascript”>
var prods = [‘pro1’, ‘pro2’, ‘pro3’];
function add()
{
prods.push(‘meeow’);
}

function display()
{
alert(prods.slice(-1) + ’ : prods.slice(-1)‘); // returns meeow
alert(prods.slice(0) + ’ : prods.slice(0)’); //returns pro1, pro2, pro3, meeow
alert(prods.slice(1) + ’ : prods.slice(1)‘); // returns pro2, pro3, meeow
alert(prods.slice(2) + ’ : prods.slice(2)’); // returns pro3, meeow
alert(prods.slice(3) + ’ : prods.slice(3)‘); // returns meeow
alert(prods.slice(prods.length) + ’ : prods.slice(prods.length)’); // returns nothing
alert(prods.slice(prods.length - 1) + ’ : prods.slice(prods.length - 1)'); // returns meeow

alert(prods[-1] + ' : prods[-1]'); // returns undefined
alert(prods[0] + ' : prods[0]'); // returns pro1
alert(prods[1] + ' : prods[1]'); // returns pro2
alert(prods[2] + ' : prods[2]'); // returns pro3
alert(prods[3] + ' : prods[3]'); // returns meeow
alert(prods[prods.length] + ' : prods[prods.length]'); // returns undefined
alert(prods[prods.length - 1] + ' : prods[prods.length - 1]'); // returns meeow

}

</script>
</head>
<body>
<input value=“bleh” type=“button” onclick=“add();display();”/>
</body>
</html>

ulricht609 Thanks for jumping in, looks like I need an if else statement on the length of products. The push works because I checked the length by adding onclick to button that alerts products length. unfortunatley

alert(products.slice(-1) + ’ : products.slice(-1)'); // returns undefined in the prompt when products length is 1
//Which is wierd as products length 1 actualy means two 0 & 1 ?

Will try it again but I’m pritty sure I’ve seen a function that querys the length of an array before it uses slice[-1]:x

Actually I was wrong, that is the correct syntax, this works and I can’t thank you enough. Muchos Mas Gracias!
viewcart() that works


function viewcart(){
var items=cartbody.rows.length;
if(f1.className=='htmlpage'){
prompt('You need to return to product page: ',products.slice(-1));//returns 'silver' in prompt box
//the exact affect I wanted. I thought I had tried it but must have done it wrong
//the products length doesn't have to be longer than 1 or element 0 of the array
//which is actually alert as length returning '1'?
}

Now I have to create a pseudo prompt which changes the innerHTML of ‘f1’ and gets the slice[-1] value just like the prompt input does. Then when the client clicks the OK./Return button I can apply the onclick calling the the original function with the value in that input?

Thanks again ulricht609 for your instruction. Excelent demontration of the power of Javascript. I’ll post back when all is done.:lol::rofl::wink:

no probs man lol anytime :slight_smile: