Greasemonkey - how to click button if ID and Style are present?

Scorpion Ghost · Jun 24, 2022

There is this code on a site:

HTML:

<input id="somet" name="somet" type="text">

Sometimes it turns into this:

HTML:

<input id="somet" name="somet" style="outline: 1px solid blue;" type="text">

When this happens, I want Greasemonkey to click a button. The best I came up with is this:

Code:

// ==UserScript==
// @name        Click Submit
// @namespace   bdfb
// @match       https://www.site.org/
// @include     about:config
// @version     1
// @grant       none
// ==/UserScript==



var intv = setTimeout(function() {

if (/(outline)|(mediumheight)/i.test (document.body.innerHTML) ){

{
      var elems = document.querySelectorAll('input[name^="Submit"]'); for (var i = 0, len = elems.length; i < len; i++){     elems[i].click(); } 
}
      
      }

    }, 25000);

So when the word "outline" appears in the HTML of the page, the script clicks the button.

I'd have it work on a fast "setInterval", but the problem is that the word "outline" can appear on the webpage even when I don't want the button clicked (i have another script that removes the word if it appears at the wrong time and place).

This is kinda stupid though

How can I make the script check the ID (somet) and Style (outline), and if both of these conditions are true, run the code and click the button? @Gogol

moonshine7000 · Jun 24, 2022

You need to create a function first before calling setTimeout()
https://www.w3schools.com/jsref/met_win_settimeout.asp

Scorpion Ghost · Jun 24, 2022

moonshine7000 said:
You need to create a function first before calling setTimeout()
https://www.w3schools.com/jsref/met_win_settimeout.asp

The timeout isnt an issue.

The issue is, i want both the ID and Style to be true in order for the script to do the click.

So like...

"If id is somet and style is present, then click button"

Thats the "logic" i need.

moonshine7000 · Jun 24, 2022

You call it like this Document.getElementById("somet").style but style is a object containing properties and functions here is a resource https://stackoverflow.com/questions/29768833/how-to-add-style-on-document-getelementbyid

Scorpion Ghost · Jun 24, 2022

moonshine7000 said:
You call it like this Document.getElementById("somet").style but style is a object containing properties and functions here is a resource https://stackoverflow.com/questions/29768833/how-to-add-style-on-document-getelementbyid

But I'm not trying to use it in order to do a CSS change.

I'm trying to use it as a conditional to do my click. Not sure how it can be used to solve my problem.

Gumnby · Jun 24, 2022

Something like

if(document.querySelector('#somet').style !== undefined){
clickTheButton();
}

Console.log a bit to figure out the proper way not sure if it is null or undefined or whatever

Scorpion Ghost · Jun 24, 2022

Okay, I figured it out!

Code:

// ==UserScript==
// @name        detect yo momma
// @include     https://site.com/penis
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0.   It restores the sandbox.
 */

$("#stupidid").on("change keyup paste", function(){

  setTimeout(function() {
 
      var elems = document.querySelectorAll('input[name^="Submit"]'); for (var i = 0, len = elems.length; i < len; i++){     elems[i].click(); }
 
          }, 3000);
 
});

I gotta say, in all my years of dicking around for hours trying to figure shit out because I don't wanna spend $30-100 bucks, I find that jquery is really awesome at solving problems with a single line of code. It's really cool.

The code above works like a charm. I added a 3 second delay from the moment it detects change to the moment it fires my script. All good.

Xyox · Jun 24, 2022

Scorpion Ghost said:
~

If you want to use JQuery might as well use it all the way to avoid the for loop.

Code:

// ==UserScript==
// @name        detect yo momma
// @include     https://site.com/penis
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0.   It restores the sandbox.
 */

$("#stupidid").on("change keyup paste", () => {

  setTimeout(() => {

    $('input[name^="Submit"]').click();
 
  }, 3000);
 
});

Scorpion Ghost · Jun 24, 2022

Xyox said:

If you want to use JQuery might as well use it all the way to avoid the for loop.

Code:

// ==UserScript==
// @name        detect yo momma
// @include     https://site.com/penis
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0.   It restores the sandbox.
 */

$("#stupidid").on("change keyup paste", () => {

  setTimeout(() => {

    $('input[name^="Submit"]').click();
 
  }, 3000);
 
});

Okay, that makes sense, I guess. I'll do that. That's awesome, thank you.

What's a for loop?

moonshine7000 · Jun 24, 2022

Scorpion Ghost said:
Okay, that makes sense, I guess. I'll do that. That's awesome, thank you.

What's a for loop?

You use the for loop for repeating instructions for how many times you want.
https://www.w3schools.com/js/js_loop_for.aspThat is one of the basics of writing algorithms which is repetition.

Scorpion Ghost · Jun 24, 2022

Xyox said:

If you want to use JQuery might as well use it all the way to avoid the for loop.

Code:

// ==UserScript==
// @name        detect yo momma
// @include     https://site.com/penis
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0.   It restores the sandbox.
 */

$("#stupidid").on("change keyup paste", () => {

  setTimeout(() => {

    $('input[name^="Submit"]').click();
 
  }, 3000);
 
});

So last night I added this to my script but I didn't get to test it because I went to sleep.

I tested it now, and the click doesn't happen. I have no idea why.

So I put back my old code, and it works.

Scorpion Ghost said:

Code:

// ==UserScript==
// @name        detect yo momma
// @include     https://site.com/penis
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0.   It restores the sandbox.
 */

$("#stupidid").on("change keyup paste", function(){

  setTimeout(function() {
 
      var elems = document.querySelectorAll('input[name^="Submit"]'); for (var i = 0, len = elems.length; i < len; i++){     elems[i].click(); }
 
          }, 3000);
 
});

It's this bit that's not working:

Code:

$('input[name^="Submit"]').click();

But I have no idea why. If I replace that with my other code for that click, then it works.

Xyox · Jun 24, 2022

Scorpion Ghost said:
I tested it now, and the click doesn't happen. I have no idea why.

The click part works when tested on CodePen.
Unfortunately, without knowing the whole situation you're testing it's very hard to help.
Since you're not into programming If you found a code that gets the job done just use that.

Scorpion Ghost · Jun 24, 2022

Xyox said:
The click part works when tested on CodePen.
Unfortunately, without knowing the whole situation you're testing it's very hard to help.
Since you're not into programming If you found a code that gets the job done just use that.

View attachment 215594

So I had someone else who is into programming check it out, and he said the issue is with validate function, it doesn't exist. So when I run the code (which works) it triggers that error, and that's why it won't submit the form.

So he gave me the code which will remove the onclick event and then it will submit. I tested it, and it worked

Now I'm unsure if I should just stick with my original code or switch to this. Like, what's less "stressful" for the browser.

Xyox · Jun 24, 2022

Scorpion Ghost said:
So I had someone else who is into programming check it out, and he said the issue is with validate function, it doesn't exist. So when I run the code (which works) it triggers that error, and that's why it won't submit the form.

So he gave me the code which will remove the onclick event and then it will submit. I tested it, and it worked

Now I'm unsure if I should just stick with my original code or switch to this. Like, what's less "stressful" for the browser.

It doesn't really matter, use what seems best to you, since you're not into programming having less code might help you keep it cleaner and move around better.
The difference between the two codes in terms of "stress" for the browser is so minimal I wouldn't really bother considering it.
But if you're really concerned about "stressful" just don't use JQuery at all.

moonshine7000 · Jun 24, 2022

Xyox said:
It doesn't really matter, use what seems best to you, since you're not into programming having less code might help you keep it cleaner and move around better.
The difference between the two codes in terms of "stress" for the browser is so minimal I wouldn't really bother considering it.
But if you're really concerned about "stressful" just don't use JQuery at all.

What is the best development environment for JavaScript to check code for errors.

Scorpion Ghost · Jun 24, 2022

Xyox said:
It doesn't really matter, use what seems best to you, since you're not into programming having less code might help you keep it cleaner and move around better.
The difference between the two codes in terms of "stress" for the browser is so minimal I wouldn't really bother considering it.
But if you're really concerned about "stressful" just don't use JQuery at all.

Okay, I figured, thanks

Xyox · Jun 24, 2022

moonshine7000 said:
What is the best development environment for JavaScript to check code for errors.

Not sure what you mean, personally I use VSCode for everything.

If what I'm doing is to be run in the browser console or with Greasemonkey or Tampermonkey for example, I'll see the errors in the browser console.

If it's a NodeJS project I'll see the errors in the terminal.

Usually, I don't need more than that to figure out what's going on and fix it. But if you're building something very complex and need debugging you can do that as well in VSCode.

And there are many alternatives to VSCode that do the same or even better that you might prefer, I just happen to like that one.

Greasemonkey - how to click button if ID and Style are present?

Scorpion Ghost

Elite Member

moonshine7000

Elite Member

Scorpion Ghost

Elite Member

moonshine7000

Elite Member

Scorpion Ghost

Elite Member

Gumnby

Junior Member

Scorpion Ghost

Elite Member

Xyox

Junior Member

Scorpion Ghost

Elite Member

moonshine7000

Elite Member

Scorpion Ghost

Elite Member

Xyox

Junior Member

Scorpion Ghost

Elite Member

Xyox

Junior Member

moonshine7000

Elite Member

Scorpion Ghost

Elite Member

Xyox

Junior Member

Main Menu

Marketplace

Making Money

BlackHatWorld

Other