Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Photo Viewer App - problem with event object

Hi there.

One of my pet projects for this year is that I'm trying to teach myself to make a Photo Viewer App where I page through a set of photos and it displays the data about that image. Things like the ISO, Aperture and Shutter speed settings. This is to try and help me with my other interest, Photography.

https://landing.jonniegrieve.co.uk/photo_viewer_2/

I'm following this tutorial to try and do it.

There's an issue here with the event object

console.log("js connected");

jQuery(function(){

    let imageList = [
        [
            //photo 1
            ["img/IMG_0010.JPG"], ["ISO 300"], ["1/200"], ["f/4.5"], ["35mm"], ["alt text 1"], ["description text 1"]
        ],
        [
            ["img/IMG_0048.jpg"], ["ISO 400"],  ["1/250"], ["f/5.5"], ["55mm"], ["alt text 2"], ["description text 2"]
        ],
        [
            ["img/IMG_0329.JPG"], ["ISO 700"],  ["1/2000"], ["f/6.5"], ["300mm"], ["alt text 3"], ["description text 3"]
        ]

    ];

    $storage = $('.storage');
    $viewer = $('.viewer');
    $data = $('.data');
    $index = 0;

    for(let i=0; i < imageList.length; i++) {
        $storage.append("<div class=" + "image_item image" + i +"> <img src= " + "http://projects.jonniegrieve.co.uk/photo_viewer/assets/" + imageList[i][0] + " /> </div>");

        //image slide list
        $viewer.append(`<img class="main_viewer" src="http://projects.jonniegrieve.co.uk/photo_viewer/assets/${ imageList[i][0] }" />`)

    }



    $main_view = $(".main_viewer");
    $store_image = $(".storage img");

    $(document).on("keydown", () =>{
        $main_view.css("display", "none");

        show();
    });

    function show($index, event){

        //console.log(event.keyCode);
        if( event.keyCode == 39 ) {
            $index++;
        }

        if( event.keyCode == 37 ) {
            $index--;
        }

        return $index;
    }

    //Append Image Data Table 
    $data.append(`

        <h2>Image Data</h2>
            <table>
                <tr>
                    <td>ISO: </td> <td> ${imageList[0][0]} </td>
                    <td>Shutter Speed: </td> <td> ${imageList[0][1]} </td>
                    <td>Aperture: </td> <td> ${imageList[0][2]} </td>
                    <td>Focal Length: </td> <td> ${imageList[0][3]} </td>
                    <td>Alt Text: </td> <td> ${imageList[0][4]} </td>
                    <td>Description: </td> <td> ${imageList[0][5]} </td>
                </tr>
            </table>

            <p><strong>ISO:</strong> ${imageList[0][1]} </p>
            <p><strong>Shutter Speed: </strong> ${imageList[0][2]} </p>
        `
);



});

But this returns the following Exception

Uncaught TypeError: Cannot read property 'keyCode' of undefined
app.js:46 Uncaught TypeError: Cannot read property 'keyCode' of undefined
    at show (app.js:46)
    at HTMLDocument.<anonymous> (app.js:40)
    at HTMLDocument.dispatch (jquery-3.6.0.min.js:2)
    at HTMLDocument.v.handle (jquery-3.6.0.min.js:2)

It seems to be a problem with events. Was the use of event here recently deprecated?

The idea is to eventually be able to click on the image thumbnails to open the image. But for now to use the arrow keys to cycle through them. What really obvious thing am I missing here?