TypeError: Cannot read property 'click' of null

Question

I have been mass following / unfollowing / favoriting / unfavoriting on twitter with these codes ;

$('button.follow-button').click();
$('button.ProfileTweet-actionButtonUndo').click();
$('a.favorite').click();

I found some not-working codes online and tried to fix, so they are nearly working now. The only thing is to go to the page on google chrome, press f12 , open console and run the command.

So now, I wanted to use the same system in Vine. There"s an extension for google chrome to use vine ( https://client.vineclient.com/ ) and I am trying to use it because original webpage ( vine.co ) is not even useful.

The only difference between twitter and this, is that, in vine client for ^followers^ section, an pop-up comes in the page. And I don!t know if it detects the buttons.

So , the code of the button I am trying to click from original page , ( I took it using developer tools / elements )

<div class="user">
<img alt="Tuğçe Nur TEKİN" class="avatar" src="http://v.cdn.vine.co/r/avatars/3C2E4F40F11066473630650847232_pic-r-1397241239141e51579937f.jpg.jpg?versionId=ttIz4CExCjW_4TEnxYbnehPPpXRyzMco">
<div class="wrapper">
<a class="username" 
href="https://client.vineclient.com/explore/users/1066473613911363584">
Tuğçe Nur TEKİN
</a>
</div>
<a class="button follow" data-id="1066473613911363584">
<i class="icon">
</i>
</a>
</div>

The thing to click is here :

When I manually click, it changes into this :

<a class="button unfollow" data-id="1066473613911363584"><i class="icon"></i></a>

And the command I use to try to click

$(".a.follow").click();

The error I get,

TypeError: Cannot read property 'click' of null

How can I fix that? By the way, in these codes, I couldn"t find actually any ^button^ codes.. Thanks!

UPDATE

1. http ://prntscr. com/3pmo2i
2. http ://prntscr. com/3pmoyk
3. http ://prntscr. com/3pmpym

Answer 1

I had encountered this problem, when I run javascript on the webpage from elsewhere (eg. Selenium) while simultaneously using Developer Tools. Try closing Developer Tools and run the script.

Answer 2

In order to use the jQuery library, you need to make sure that the library has been loaded on the page. As @adeneo mentioned, jQuery does not return null values, which means the $ variable is holding reference to an object that isn't jQuery. To verify that jQuery is loaded on a page, enter typeof jQuery into the chrome debugger. If jQuery is loaded on the page, the console will output "function". Otherwise, it will output "undefined". Steps for adding jQuery to your page can be found here.

Once you have verified that jQuery is properly loaded on the page, you will have to correct the CSS selector that you are using to access the desired element.

$(".a.follow") means "select all elements that have both classes 'a' and 'follow'".

<div class="a follow"></div>

Instead, your selector should be $("a.follow"), which means "select all 'a' type elements that have the 'follow' class".

<a class="follow"></a>

Answer 3

In my case the solution was to simply turn off the element-inspector within my browser! :)