Snippet of HTML code I need to retrieve values from:

<div class="elgg-foot">
  <input type="hidden" value="41" name="guid">
  <input class="elgg-button elgg-button-submit" type="submit" value="Save">
</div>

I need to get the value 41, which is simple enough with:

var x = document.getElementsByTagName("input")[0];
var y = x.attributes[1].value;

However I need to make sure I'm actually retrieving values from inside "elgg-foot", because there are multiple div classes in the HTML code.

I can get the class like this:

var a = document.getElementsByClassName("elgg-foot")[0];

And then I tried to bine it in various ways with var x, but I don't really know the syntax/logic to do it. For example:

var full = a.getElementsByTagName("input")[0];

So: Retrieve value 41 from inside unique class elg-foot.

I spent hours googling for this, but couldn't find a solution (partly because I don't know exactly what to search for)

Edit: Thanks for the answers everyone, they all seem to work. I almost had it working myself, just forgot a [0] somewhere in my original code. Appreciate the JQuery as well, never used it before :-)

Snippet of HTML code I need to retrieve values from:

<div class="elgg-foot">
  <input type="hidden" value="41" name="guid">
  <input class="elgg-button elgg-button-submit" type="submit" value="Save">
</div>

I need to get the value 41, which is simple enough with:

var x = document.getElementsByTagName("input")[0];
var y = x.attributes[1].value;

However I need to make sure I'm actually retrieving values from inside "elgg-foot", because there are multiple div classes in the HTML code.

I can get the class like this:

var a = document.getElementsByClassName("elgg-foot")[0];

And then I tried to bine it in various ways with var x, but I don't really know the syntax/logic to do it. For example:

var full = a.getElementsByTagName("input")[0];

So: Retrieve value 41 from inside unique class elg-foot.

I spent hours googling for this, but couldn't find a solution (partly because I don't know exactly what to search for)

Edit: Thanks for the answers everyone, they all seem to work. I almost had it working myself, just forgot a [0] somewhere in my original code. Appreciate the JQuery as well, never used it before :-)

• javascript
• html
• dom

• Are you opposed to using jQuery? – sheriffderek Commented Sep 30, 2015 at 1:03
• 1 var x = a.getElementsByTagName("input")[0]; seems like it should work. – Felix Kling Commented Sep 30, 2015 at 1:11
• ( I had a larger plan then just using jQuery for retrieving the element. : ) ) – sheriffderek Commented Sep 30, 2015 at 1:28

5 Answers 5

The easiest way is to use jQuery and use CSS selectors:

$(".elgg-foot") will indeed always get you an element with class "elgg-foot", but if you go one step further, you can use descendent selectors:

$(".elgg-foot input[name='guid']").val()

That ensures that you only get the input named guid that is a child of the element labelled with class elgg-foot.

The equivalent in modern browsers is the native querySelectorAll method:

document.querySelectorAll(".elgg-foot input[name='guid']")

or you can do what you have yourself:

var x = document.getElementsByClassName("elgg-foot")
var y = x.getElementsByTagName("input")[0];

Assuming you know it is always the first input within the div

You can bine it like this:

    var a = document.getElementsByClassName("elgg-foot")[0];
    var b = a.getElementsByTagName("input")[0];
    var attribute = b.attributes[1].value;
    console.log(attribute); // print 41

Think of the DOM as the tree that it is. You can get elements from elements in the same way you get from the root (the document).

You can use querySelector like

var x = document.querySelector(".elgg-foot input");
var y = x.value;

query the dom by selector https://developer.mozilla/en-US/docs/Web/API/Document/querySelector

var fourty1 = document.querySelector('.elgg-foot input[name=guid]').value;

querySelector will return the first match from the selector. This selector will find the element with class elgg-foot and then look at the input element inside of that for one named guid and then take the value of the selected element.

I think the simplest way would be using JQuery. But using only javascript,

the simplest way would be:

var div = document.getElementsByClassName("elgg-foot")[0];
var input = div.getElementsByTagName("input")[0];
alert(input.value)

Take a look at this JSFiddle here: http://jsfiddle/2oa5evro/