GetElementsByTagName Problem

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 396,965 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,003 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1510 | Replies: 1

•

Join Date: Apr 2008

Posts: 1

Reputation: TheVenerableZ is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

TheVenerableZ TheVenerableZ is offline

Offline

Newbie Poster

GetElementsByTagName Problem

Apr 17th, 2008

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:

Help with Code Tags

(Toggle Plain Text)

<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:

Help with Code Tags

(Toggle Plain Text)

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

Last edited by TheVenerableZ : Apr 17th, 2008 at 9:26 am. Reason: fix code tags

•

Join Date: Jun 2006

Location: India

Posts: 6,802

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 337

~s.o.s~

Offline

Rebellion Revamped

Re: GetElementsByTagName Problem

Apr 17th, 2008

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:

Help with Code Tags

(Toggle Plain Text)

<!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.

Help with Code Tags

(Toggle Plain Text)

<!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>

Last edited by ~s.o.s~ : Apr 17th, 2008 at 1:18 pm.

"I don't accept change. I don't deserve to live."

"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."