Getting the text of a tag

Question

I am trying to get the text of all hyperlinks in my web page and check whether the text is "selected". If it is "selected", an alert showing the id will be prompted.

However, when I tried to use inputs[i].value to get the text of the , the result I gets was "undefined".

How can I go about doing it?

The following codes are for my hyperlinks:

<a href="www.google.com" id="1">selected</a>
<a href="www.facebook.com" id="2">select</a>
<a href="www.gmail.com" id="3">selected</a>
<button onclick="check()">Check!</button>

The following codes are for my javascript:

function check() {
    var inputs = document.getElementsByTagName('a');
    for(var i = 0; i < inputs.length; i += 1) {
        if (inputs[i].value == "selected")
        {
            alert(inputs[i].id);
        }
    }
}

@alcoholisevil It's `textContent` or just `text`, not `textValue` — blex, Jul 16 '15 at 11:53
you could use .innerText or .innerHTML as the anchor element does not contain any value property. check my fiddle here: http://jsfiddle.net/u6Lambn3/3/ — rand0m, Jul 16 '15 at 11:59

Curtis · Accepted Answer · 2015-07-16T14:53:30.307

9

Use textContext instead.

if (inputs[i].textContent == "selected")

http://jsfiddle.net/k6cpvt5e/2/

edited Jul 16 '15 at 14:53

answered Jul 16 '15 at 11:47

Curtis

101,612
66
270
352

1

[HTMLAnchorElement.text](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement). Depending on its existance seems like a terribad idea though; especially as it’s not there on all elements. Better use [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) directly. – poke Jul 16 '15 at 11:56
1

I would add a trim() to compare. Since the value could also be 'selected '. – JavaScript Jul 16 '15 at 11:59
1

@JavaScript Not the OP's request. They might not want to capture white space. – Curtis Jul 16 '15 at 11:59
It never hurts to hint it out tho. – JavaScript Jul 16 '15 at 12:00
@JavaScript It's a fair point but I would rather capture the white-space before it's rendered to the client than hack a fix in a lookup. – Curtis Jul 16 '15 at 12:02
Fair enough. Is there any reason to not use the faster === in this case? – JavaScript Jul 16 '15 at 12:03
@Javascript I don't think this will be any faster in this instance as the types are the same. Furthermore this isn't a full code review, I'm just answering the OP's question. – Curtis Jul 16 '15 at 12:11
“Faster”? It’s not about speed, it’s about teaching proper ways to solve problems, not setting bad examples that solve *this problem* but will cause new problems later. – poke Jul 16 '15 at 12:14
@poke I agree, but as I stated this isn't a code review. If it was I would pay more attention to `onclick` attribute over an event listener, than the conditional operator. – Curtis Jul 16 '15 at 12:25
1

It's content, not context. – alcohol is evil Jul 16 '15 at 14:18
@alcoholisevil Cheers, was correct in jsfiddle, but typo on SO – Curtis Jul 16 '15 at 14:53

Dominic · Answer 2 · 2015-07-16T11:51:57.443

2

Use innerText. It's not a value on the <a> but actually a text node inside it.

if (inputs[i].innerText === "selected")

Edit: Use innerHtml instead ;)

edited Jul 16 '15 at 11:51

answered Jul 16 '15 at 11:48

Dominic

62,658
20
139
163

`.innerText` won't work in FireFox. [http://stackoverflow.com/a/22990890/4338417](http://stackoverflow.com/a/22990890/4338417) – Shrinivas Shukla Jul 16 '15 at 11:51
@ShrinivasShukla thanks didn't know it was an IE thing - just seemed handy as an easy way of handling `selected` for example – Dominic Jul 16 '15 at 11:53

score 0 · Answer 3 · answered Jul 16 '15 at 11:48

The correct way to access the text of <a> tag is .innerHTML NOT .value.

Check out this fiddle.

Here is the snippet.

function check() {
  var inputs = document.getElementsByTagName('a');
  for (var i = 0; i < inputs.length; i += 1) {
    if (inputs[i].innerHTML == "selected") {
      alert(inputs[i].id);
    }
  }
}

<a href="www.google.com" id="1">selected</a>

<a href="www.facebook.com" id="2">select</a>

<a href="www.gmail.com" id="3">selected</a>

<button onclick="check()">Check!</button>

score 0 · Answer 4 · answered Jul 16 '15 at 11:48

Try this..

HTML

<a href="www.google.com" id="1">selected</a>
<a href="www.facebook.com" id="2">select</a>
<a href="www.gmail.com" id="3">selected</a>
<button onclick="check()">Check!</button>

Javascript

function check() {
                var inputs = document.getElementsByTagName('a');
                for(var i = 0; i < inputs.length; i++) {
                    if (inputs[i].innerHTML == "selected")
                    {
                        alert(inputs[i].id);
                    }
                }
            }

Check this fiddle

score 0 · Answer 5 · answered Jul 16 '15 at 11:49

0

You can use innerText as.

if (inputs[i].innerText == "selected")

answered Jul 16 '15 at 11:49

Tushar Gupta

15,504
1
29
47

score 0 · Answer 6 · answered Jul 16 '15 at 11:50

0

Use .innerText instead of .value

if (inputs[i].innerText == "selected")

answered Jul 16 '15 at 11:50

SK.

4,174
4
30
48

score -1 · Answer 7 · answered Jul 16 '15 at 11:50

-1

With jQuery:

$('a').each(function() {
    if(this.text() == 'selected')
        alert($(this).attr(' id'));
}

answered Jul 16 '15 at 11:50

Gustav P Svensson

467
5
14

Getting the text of a tag

7 Answers7

Linked