Accessing Text Label Value Javascript

Question

Currently, I have a piece of java script that makes a table of cells where each cell has an ordered list of its number, a label, and a text box. A snippet of this code is written below:

<table id="drawAllQuestionsTbl">
<tbody><tr><td class="tbl">
<ol start="1">
<li>Sport 1:&nbsp;<input type="text" name="tq_g_0_guess" size="15"></li></ol></td></tr><tr><td class="tbl">

For brevity, I cut a lot of the extra stuff. In reality, this table is filled with around 10 replicas of this cell, where each cell has an ordered list with a label and text box. For the text box in this ordered list for instance, I can successfully access its value using document.getElementsByName("tq_g_0_guess"). However, my question is how to get the value of the label "Sport 1" next to this text box. Any ideas?

Do you have control over the outputted HTML? If it was in an actual label tag, then it would be much easier. — Seth
– Seth, Commented May 18, 2016 at 1:38
I wish, but unfortunately I do not. I am trying to strip this content off a web page. — user1939991
– user1939991, Commented May 18, 2016 at 1:39

Seth · Accepted Answer · 2016-05-18 01:45:48Z

2

The following will give you the text of the li node. This will be Sport 1:.

var elParent = document.getElementsByName("tq_g_0_guess")[0].parentNode;
var labelText = elParent.innerText;
console.log(labelText); // Sport 1:

You can leverage labelText to further format the text to the desired result.

If you only want Sport 1, then you can substring the everything up to the colon

labelText.substr(0, labelText.indexOf(':'));

answered May 18, 2016 at 1:45

Seth

10.5k10 gold badges50 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Collin · Accepted Answer · 2016-05-18 01:46:00Z

1

What about:

document.getElementsByName("tq_g_0_guess")[0].parentNode.innerText

answered May 18, 2016 at 1:46

Collin

2084 silver badges8 bronze badges

1 Comment

user1939991 Over a year ago

Thank you for your answer as well!

Jonham.Chen · Accepted Answer · 2016-05-18 02:01:43Z

1

writing in JavaScript:

var child = document.getElementsByName("tq_g_0_guess")[0]; // ok, must add a [0] after this.
var preTextNode = child.previousSibling;
var textContent = preTextNode.textContent; // this is the text you want.

edited May 18, 2016 at 2:01

answered May 18, 2016 at 1:51

Jonham.Chen

663 bronze badges

4 Comments

Seth Over a year ago

This does not work... child returns a nodeList. Therefore you must target an item within that node list.

Jonham.Chen Over a year ago

thanks, I seldom use getElementsByName, so I take it as getElementById.

Seth Over a year ago

Yeah it's not used often anymore. But, usually the method name hints at the returned value. getElement... vs getElements... or querySelector vs querySelectorAll

Jonham.Chen Over a year ago

yes. I turned to querySelector & querySelectorAll once I know how to use them to deal with DOM elements. And they act more like jQuery('selector').

Collectives™ on Stack Overflow

Accessing Text Label Value Javascript

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related