Member Avatar for TheVenerableZ

Hi,

Is it possible to use GetElementsByTagName for grandchild elements? I have a div with a bunch of lis nested inside of the div, and a hidden input field inside of each li. The lis are draggable, and I want to write a script that adds up the values inside each of the input fields.

Here is what my HTML looks like:

<div>
    <li>
        <input type="hidden" value="x" />
    </li>
    <li>
        <input type="hidden" value="x" />
    </li>
    <li>
        <input type="hidden" value="x" />
    </li>
</div>

The Javascript looks like this, but Firebug is telling me that x.getElementsByTagName('input') has no properties:

var div = document.getElementById(semester);
var li = div.getElementsByTagName('li')[1]; // 1 hard-coded in, would normally be inside a loop.
alert(li.getElementsByTagName('input')); // This is the problematic line.

I would greatly appreciate any help you can give.

Thanks,
Zach

  • 3 Contributors
  • 2 Replies
  • 196 Views
  • 9 Months Discussion Span
  • Latest Post Latest Post by azraelcwb

Recommended Answers

All 2 Replies

Member Avatar for ~s.o.s~

It would be better if you posted the code as it is rather than posting it in bits and pieces. Here is a small working example which is almost like yours and is working fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function addUp() {
      var divElem = document.getElementById("myDiv");
      var liElem = divElem.getElementsByTagName("li")[0];
      var ipElem = liElem.getElementsByTagName("input")[0];
      alert(ipElem.value);
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <div id="myDiv">
      <li>
        <input type="hidden" value="10">
      </li>
      <li>
        <input type="hidden" value="20">
      </li>
      <li>
        <input type="hidden" value="30">
      </li>
      <li>
        <input type="hidden" value="40">
      </li>
    </div>
    <br><br>
    <input type="button" value="Calculate" onclick="addUp();">
  </form>
</body>
</html>

It would be much more reasonable to just grab hold of the DIV element and then get all the INPUT elements or directly get all the INPUT elements instead of adopting the round about way of grabbing hold of LI's.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function addUp() {
      var total = 0;
      var divElem = document.getElementById("myDiv");
      if(!divElem)
        return;
      var elems = divElem.getElementsByTagName("INPUT");
      if(!elems)
        return;
      for(var i = 0, max = elems.length; i < max; ++i) {
        var e = elems[i];
        if(!e)
          continue;
        var val = Number(e.value);
        if(!isNaN(val))
          total += val;
      }
      alert("Total: " + total);
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <div id="myDiv">
      <li>
        <input type="hidden" value="10">
      </li>
      <li>
        <input type="hidden" value="20">
      </li>
      <li>
        <input type="hidden" value="30">
      </li>
      <li>
        <input type="hidden" value="40">
      </li>
    </div>
    <br><br>
    <input type="button" value="Calculate" onclick="addUp();">
  </form>
</body>
</html>
Member Avatar for azraelcwb

Man, tnx for your solution, it was a BIG help for me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.