Question

I am attempting to create a page which loads products from a .js array:

    var products= new Array( );

    products.push( {name: 'product01', photo: 'tshirt1', title: 'One Man Wolf Pack', price: '14.99', description: 'All Wolf Packs start with one'} );
    products.push( {name: 'product02', photo: 'tshirt2', title: 'Bear Arms', price: '14.99', description: 'Know your rights'} );
    products.push( {name: 'product03', photo: 'tshirt3', title: 'Accuracy', price: '19.99', description: 'The opposite of a fallacy'} );
    products.push( {name: 'product04', photo: 'tshirt4', title: 'HUMA', price: '19.99', description: 'A twist on sports'} );
    products.push( {name: 'product05', photo: 'tshirt5', title: 'Illuminati', price: '19.99', description: 'You went, now get the t-shirt'} );

    function get_product( name ) {
        for( var x = 0 ; x < products.length ; x++ ) {
            if( products[ x ].name == name ) {
                return products[ x ];
            }
        }
        return null;
    }

I am trying to use a For loop to step through each of the items to create a simple layout of the products

    window.onload = function ( ) {          
        load_page( );
    }


    function create_cookie( x, name1 ) {
        //if( this.onclick ){
            document.cookie = "details" + x + "=" + name1;
        //}
    }
    function load_page (  ){
        var holder = document.getElementById( "details" );
        for( var x = 0 ; x < products.length ; x++ ) {
            var li = document.createElement( "li" );

            var name1 = products[ x ].name;
            var href1 = document.createElement( "a" );
            href1.href = "details.html";    
            href1.id = products[ x ].name


            var image1 = document.createElement( "img" );
            image1.src = products[ x ].photo + ".jpg" ;

            var title1 = document.createTextNode( products[ x ].title );

            var bk1 = document.createElement( "br" );
            var bk2 = document.createElement( "br" );
            var hor = document.createElement( "hr" );

            href1.appendChild( image1 );    
            li.appendChild ( href1) ;
            li.appendChild( title1 );
            holder.appendChild( li );

            href1.onclick = create_cookie( x, name1 );

            alert(document.cookie);
        }   
    }

I think the problem occurs with my onclick event. If I dont have an “If statement” to check for the “clicked” event, then all cookies will load automatically.

Perhaps I have by buttons coded incorrently.

Any insight on how to properly create this using buttons create a cookie would be greatly appreciated.

Thanks!

~Andreas

Answer 1

You would need to change your click handler line of code from this:

href1.onclick = create_cookie( x, name1 );

to this:

(function(x, name1) {
    href1.onclick = function() {create_cookie( x, name1 )};
}) (x, name1);

You had two separate problems. First, you were assigning onclick the result of immediately executing the create_cookie(x, name1) function, not a reference to a function that would be called later when the click happened. Thus, the cookie would be created immediately and nothing would happen on the click.

Second, when you do something like this in a for loop, but refer to local variables that are changing in the for loop, it won’t work with code that is executed later in the click event. That’s because the for loop will be done at that later time and these variables will all have the values they have at the end of the for loop. My recommended code solves this by capturing the values of those variables in a self-executing function closure so that each click handler has it’s own unique copies of the variables. There are other ways to solve this issue also, but this is one of the simplest.