Click only first button with some "text" on it, instead all of them-CodePudding

I am trying to create a script that clicks a button every 31 seconds. That website contains many buttons with the class reply-markup-button rp tgico. So, to select the exact button I am looking for, I used a code that looks for the exact text on that button:

var viewAdsButton = document.getElementsByTagName("button");
var viewAdsButtonText = "View ads";

setInterval(function() { 
    for (var i = 0; i < viewAdsButton.length; i  ) {
     if (viewAdsButton[i].textContent == viewAdsButtonText) {
     viewAdsButton[i].click()
    }
  }
}, 31000);

The issue is that there are also many buttons with "View ads" on them, and I only want the script to click the first one instead of all of them.

I will appreciate any help because I've been googling and trying to find a solution for this with no success.

CodePudding user response：

Add a call to break (or return) after you click the first matching button:

var viewAdsButton = document.getElementsByTagName("button");
var viewAdsButtonText = "View ads";


setInterval(function(){ 
  for (var i = 0; i < viewAdsButton.length; i  ) {
    if (viewAdsButton[i].textContent == viewAdsButtonText) {
      viewAdsButton[i].click()
      break // Stop looping
    }
  }
}, 31000);

CodePudding user response：

If there are many buttons, don't try to use document.getElementsByTagName or document.getElementsByClassName. They return a collection of elements who knows which one you actually want to click on?

First, look at the button in the dev-tools. If it has an ID, then use document.getElementsById. Like this:

var viewAdsButton = document.getElementsById("some-button-id");

setInterval(function() { 
    viewAdsButton.click();
}, 31000);

If the button doesn't have an ID, then you should get the element by its XPath. An XPath is just a string that uniquely represents an element in the DOM hierarchy, but this isn't too important. You can copy the elements XPath in the dev-tools (Copy -> Copy XPath). Use this code for the XPath:

var viewAdsButton = document.evaluate("some-button-xpath", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

setInterval(function() { 
    viewAdsButton.click();
}, 31000);

(credit to this answer)

CodePudding user response：

Instead of using getElementsByTagName(), I grabbed the first button with the classes you listed using querySelector(). Then you can just add a click event inside the setInterval() function without looping through anything.

I also used querySelectorAll() and did a forEach() loop to add an onclick event listener to every button with those classes, to show that the setInterval() function was only clicking the first one.

const btn = document.querySelector('button.reply-markup-button.rp.tgico')
const btns = document.querySelectorAll('button.reply-markup-button.rp.tgico')
const btnText = 'View ads'

setInterval(() => {
  btn.click()
}, 500)

btns.forEach(btn => btn.addEventListener('click', (e) => e.target.classList.toggle('red')))

.red {
  color: red;
}

<button class='reply-markup-button rp tgico'>View ads</button>
<button class='reply-markup-button rp tgico'>View ads</button>
<button class='reply-markup-button rp tgico'>Don't View ads</button>
<button class='reply-markup-button rp tgico'>View ads</button>