CODEWITHSUNDEEP
javascriptjquery
Kermit
Kermit

Reputation: 5972

Javascript cannot create property 'guid' on number '100'

I am trying to trigger the scroll action on a canvas element by clicking on a link.

Here are the examples I have been following: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

JS:

$('#zoom-in-button').click(function() {
    $('.vis-network canvas').scroll(0, 100);
    // $('.vis-network canvas').scroll({top: 1000});
});

HTML:

<a id="zoom-in-button" class="nav-button">
    +
</a>
<div class="vis-network">
    <canvas style="overflow:auto">
</div>

Error:

jquery.min.js:2 Uncaught TypeError: Cannot create property 'guid' on number '100'
    at Object.add (jquery.min.js:2)

Upvotes: 1

Views: 3693

Answers (1)

raina77ow
raina77ow

Reputation: 106365

First, $('.vis-network canvas') is neither window nor HTMLElement - it's jQuery object. While this object has scroll method (in its prototype chain), it does something completely different:

This method is a shortcut for .on( "scroll", handler ) in the first and second variations, and .trigger( "scroll" ) in the third.

Note that the third case doesn't let you parameterize the event.

You're probably looking for this:

var canvas = $('.vis-network canvas')[0];
canvas.scrollLeft = 0;
canvas.scrollTop = 100;

... but it looks weird that you try to scroll the child (the contents) and not the parent. Perhaps you should actually target $('.vis-network') instead.

Upvotes: 2

Related Questions