How do you click a button by its inner text in javascript?

Question

I have the following piece of html code:

<div class ="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check></a>
</div>

The buttons look like that:

Now I like to press the button called Update by using its name (but I'm also very interested to see if it works without using its name).

I have already tried to go through the class and collect the names using loop:

var x = document.getElementsByClassName("listit");
for (var i = 0; i < x.length; i++) {
  var counter = x[i].innerText;
  if(counter == "Update"){

  }
}

And I think I almost have it, I just could not find a working way to use that click() function so I click the button Update by name? There is not something like document.getElementByInnerText()? I don't know how to get this work..? :S

Your buttons do not have the listit class so your code will not work at all. — Gabriele Petrioli
– Gabriele Petrioli, Commented Sep 25, 2018 at 12:34
For semantics (especially accessibility), you should consider using buttons for buttons and not links as buttons — vol7ron
– vol7ron, Commented Sep 26, 2018 at 2:44

connexo · Accepted Answer · 2018-09-25 12:46:32Z

You are selecting the surrounding div (which actually has the CSS class listit), not the links inside it.

var x = document.getElementsByClassName("listit");

console.log(x);

<div class ="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check&gt;</a>
</div>

If you need a collection of the links, use document.querySelectorAll('.listit a'):

function dB() {
  console.log('dB called');
}

const links = Array.from(document.querySelectorAll('.listit a'));

links.forEach((link) => {
  if (link.textContent === 'Update') {
    link.click();
  }
})

<div class ="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check&gt;</a>
</div>

Sidenote: There are certain characters that need to be replaced by their so-called HTML entities to be usable inside HTML tag content, the most important being these:

&<>

So I replaced your

<a href="post.php?f=54&y=2">New check></a>

by

<a href="post.php?f=54&y=2">New check&gt;</a>

Daniel Beck · Accepted Answer · 2018-09-25 12:39:43Z

1

You would create a mouseEvent and use dispatchEvent to fire it. (You also need to loop over listit's children, rather than the div itself):

var dB = function() {console.log("CLICKED")}

var x = document.getElementsByClassName("listit")[0].children;
for (var i = 0; i < x.length; i++) {
  var counter = x[i].innerText;
  if (counter == "Update") {
    x[i].dispatchEvent(
      new MouseEvent('click')
    )
  }
}

<div class="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check></a>
</div>

answered Sep 25, 2018 at 12:39

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

3 Comments

connexo Over a year ago

div.listit might have non-clickable children whose innerText is Update.

Daniel Beck Over a year ago

I suppose that's possible. Firing a click event on a non-clickable child would be harmless, however. (This certainly isn't a traversal structure I would use, I was just avoiding modifying parts of their code that weren't directly relevant to the question they asked.)

connexo Over a year ago

Sure it is, but it's not intentional in those cases which is why it might be better to only target potential candidates for the collection to iterate over.

Mark Baijens · Accepted Answer · 2018-09-25 13:01:10Z

1

You need to loop over the child elements too to get the button since your class selector works on the parent div.

This is really bad design though. If you have the ability to change the html please do so.

var mainElement = document.getElementsByClassName("listit");
for (var i = 0; i < mainElement.length; i++) {
  var children = mainElement[i].childNodes;
  for (var j = 0; j < children.length; j++) {
    if (children[j].innerText == "Update") {
      console.log('found by innertext');
      console.log(children[j]);
    }
  }
}

<div class="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check></a>
</div>

You can even get the element by the href attribute if that's an options for you. Al tough this looks very dodgy too.

var element = document.querySelector('.listit a[href="javascript:dB()');
console.log(element);

<div class="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check></a>
</div>

This is how the button works. By putting javascript: in the href the button executes the part of the href after the :. So in this case dB() which means execution of the function named db.

function dB() {
  console.log('update button pressed');
}

<div class="listit">
      <a href="javascript:dB()">Update</a>
      <a href="post.php?f=54&y=5">New iso</a>
      <a href="post.php?f=54&y=2">New check></a>
    </div>

edited Sep 25, 2018 at 13:01

answered Sep 25, 2018 at 12:38

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

2 Comments

eyesima Over a year ago

Thank you. This is not my own html I was only visiting random sites and try to learn different ways to click buttons. This looked very crazy with the hrefs to me and I was curious how it was done here.

Mark Baijens Over a year ago

The href of the button you mention executes javascript when the button is pressed. When you press the button the function dB() is called.

Collectives™ on Stack Overflow

How do you click a button by its inner text in javascript?

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related