Cannot read property left of undefined. Jquery Error

Question

I am working on reactjs. I am getting an error

Uncaught TypeError: Cannot read property 'left' of undefined
    at HTMLDivElement.eval (DummyPlayer.js:184)
    at HTMLDivElement.dispatch (dll.vendor.js:39569)
    at HTMLDivElement.elemData.handle (dll.vendor.js:39381)

Below is my code

return (

            <div>
                <div className='video-player'>
                    <div className='video-player-inner'>
                        <video
                            className='video-js video-el vjs-big-play-centered vjs-default-skin'
                            id='video-el'
                            ref={node => this.video_el = node}>
                            <source src={this.props.video_file_selected_reducer.url} type="video/mp4"/>
                        </video>
                    </div>
                </div>
                <div id="custom-seekbar" onClick={this.customBarClicked}>
                    <span></span>
                </div>
            </div>

        )

And this is my customBarClicked method

customBarClicked(e){
        var offset = $(this).offset();
        var left = (e.pageX - offset.left);
        var totalWidth = $("#custom-seekbar").width();
       var percentage = ( left / totalWidth );
        var vidTime = duration * percentage;
        currentTime = vidTime;
    }

Can someone please tell me the how to solve it?

By the error message, i'd say `offset` is undefined. Are you sure you're not supposed to be using `e` rather than `this` to target the clicked element? — Jamiec, May 17 '17 at 21:03
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: MouseEvent, type: "click"…} — EdG, May 17 '17 at 21:09
ANd you've been through the [react docs especially handling events](https://facebook.github.io/react/docs/handling-events.html) I assume? — Jamiec, May 17 '17 at 21:11
Marked duplicate shows how to access the clicked element - not exactly the same as yours but should answer your question. You probably just need `var offset = $(e.target).offset()` — Jamiec, May 17 '17 at 21:13

Cannot read property left of undefined. Jquery Error

0 Answers0