Search code examples
javascriptsyntax-errorpug

Syntax Error: Missing ")" After Argument List - How Do I Fix It?


I'm working on a touchable image slider in JavaScript, and I open the console (after I click on "Inspector") and see this error:

SyntaxError: missing ) after argument list

Here is the whole code written in PUG for the file that I think is the one that has something wrong:

doctype html
html
    head
        meta(
            name="viewport",
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabel=no",
        )
        
        style.
            
            body {
                overflow: hidden;
            }

            .image {
                height: 100vh;
                width: 100vw;
            }

            .image-list {
                display: flex;
                flex-wrap: nowrap;
                position: absolute;
                left: -170%;
            }

            head,
            body {
                height: 100%;
            }
        
    body
        .image-list
            each image in ['lavender', 'lavenderblush', 'pink']
                .image(style=`background-color:${image}`)=image
        script.
            const imageElementList = 
            [... document.querySelectorAll('.image')];
            imageElementList.map(imageElement => {
                const imageElementDimensions = 
                imageElement.getBoundingClientRect();
                const windowWidth = window.screen.width;
                let start = 0,
                    end = 0;
                imageElement.addEventListener('touchstart', e 
                => {
                    start = e.touches[0].clientX;
                    console.log(start)
                })
                imageElement.addEventListener('touchend', e => {
                    end = e.changedTouches[0].clientX;
                    console.log(end)
                    const direction = start - end;
                    if(direction > 0) {
                        console.log('left',
                        imageElementDimensions.left,
                        windowWidth)
                        //- Decrease the left style property
                        imageElement.style.left = (imageElementDimensions.left - windowWidth) + 'px';
                    } else {
                        console.log('right')
                    }
                })
            })

Here is the link of the video on YouTube for you to see what the result should look like: https://www.youtube.com/watch?v=tm_vSJFMqwA&list=PLlgRhtOkjmmDaca6lcyJ2DYh6GNAXzrto&index=4

Can somebody help? Thanks.


Solution

  • The problem was that in .image-list, I had entered in: left: -170%;which I didn't want. I re-watched the YouTube video and it worked alright after I had added some of the code that the tutorial had mentioned.