how do I get the content of a div element relative to another div element using javascript?

Question

Being a newbee at this forgive me for any noob questions:

The code:

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title1</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date">14 November 2012</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        var marathonDateField = document.getElementById('sidebar-date').parentNode.parentNode.childNodes[1].childNodes[0].innerHTML;
    var now = new Date();
    var then = new Date(marathonDateField);
    var gap = then.getTime() - now.getTime();
    var gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write("" + gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title2</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date">14 december 2011</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        var marathonDateField = document.getElementById('sidebar-date').parentNode.parentNode.childNodes[1].childNodes[0].innerHTML;
    var now = new Date();
    var then = new Date(marathonDateField);
    var gap = then.getTime() - now.getTime();
    var gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write("" + gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

I'm trying to get the javascript buried within div block titled title2 to extract the text formatted date for div id "sidebar-date" but instead it grabs the text formatted date from the div block titled title1 within the first div structure.

How do i get the date from the last div section instead of from the first div section?

Answer 1

ID's are supposed to be just that - unique identifiers. You must have only one element on the entire document with a given ID.

The simple solution to this is to give each sidebar-date element a unique id - so for the first one call it id="sidebar-date-1" and the second one call it id="sidebar-date-2" .

If two elements exist with the same ID, document.getElementById() will always return the one that occurs first in the document.

---

EDIT:

I have just realise you also have another problem - you are attempting to do your var declarations twice. The second declaration will not result in a new value for the variable, since the variable was already declared.

You also don't need to call all the parentNode.childNode[] parts as you already have the element you want. These should only be used if you need to do something with an element and it's parent/child nodes, which you don't here.

If you want the element above instead of the one your getting, don't use element.parentNode , give the element above it's own ID and use document.getElementById() on it instead.

This edited version with all issues fixed works for me (updated):

<!-- Declare all your variables once at the top of the page -->
<script type="text/javascript">var marathonDateField, now, then, gap</script>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title1</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date-1">14 November 2012</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        marathonDateField = document.getElementById('sidebar-date-1').innerHTML;
    now = new Date();
    then = new Date(marathonDateField);
    gap = then.getTime() - now.getTime();
    gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write(gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title2</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date-2">14 december 2011</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        marathonDateField = document.getElementById('sidebar-date-2').innerHTML;
    now = new Date();
    then = new Date(marathonDateField);
    gap = then.getTime() - now.getTime();
    gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write("" + gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

---

ANOTHER EDIT:

As ufotds says, you would be far better to do this with a function. Eg

At the top of your document, preferably in the <head>:

<script type="text/javascript">
  function writeGapString (elID) {
    var now, then, gap
    now = new Date();
    then = new Date(document.getElementById('sidebar-date-'+elID).innerHTML);
    gap = Math.floor((then.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
    document.write(gap + " days left");
  }
</script>

Then for the first displayed part:

<div class='sidebar-days-left'>
  <script type="text/javascript">writeGapString(1);</script>
</div>

Then for the second displayed part:

<div class='sidebar-days-left'>
  <script type="text/javascript">writeGapString(2);</script>
</div>

...and so on and so on.

---

YET ANOTHER EDIT:

Here is the most succinct version of the code that does what you want (I have removed a load of unnecessary <div>s). All you need to do as you go along generating the code is increment the value appended to the end of the ID for the date container <div>, and pass the same (incremented) value to the function for each iteration.

<script type="text/javascript">
  function writeGapString (elID) {
    var now, then, gap
    now = new Date();
    then = new Date(document.getElementById('sidebar-date-'+elID).innerHTML);
    gap = Math.floor((then.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
    document.write(gap + " days left");
  }
</script>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div class="sidebar-title">title1</div>
  <div id="sidebar-date-1">14 November 2012</div>
  <div class="sidebar-days-left">
    <script type="text/javascript">writeGapString(1);</script>
  </div>  
  <div class="sidebar-link">
    <a href="http://my.domain.com/">Click here to read more...</a>
  </div>
  <div class="sidebar-pix"></div>
</div>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div class="sidebar-title">title2</div>
  <div id="sidebar-date-2">14 december 2011</div>
  <div class="sidebar-days-left">
    <script type="text/javascript">writeGapString(2);</script>
  </div>  
  <div class="sidebar-link">
    <a href="http://my.domain.com/">Click here to read more...</a>
  </div>
  <div class="sidebar-pix"></div>
</div>

Incidentally, this is one of those rare occasions where a <table> might be the right way to go...

Answer 2

var marathonDateField 
  = document.getElementById('sidebar-date').parentNode.parentNode.childNodes[1].childNodes[0].innerHTML;

Your problem is in this line, if you already grab the "sidebar-date" you can call innerText or innerHTML directly on it and you don't need to walk up and then back down with parentNodes and childNodes

update: I didn't see you had two of them. In this case you should rather give your divs called title1 and title2 unique id's like well, title1, title2, and then use getElementById on them and walk down with child nodes, or make sidebar-date a class instead of an id, which is more appropriate if it is not unique and if you get complex structures like that use XPath to get them.

ps: also now realize you have redundant javascript code. A better practice would be to include once in your document a javascript function that returns a text for a specific block for which it can take an id as a parameter.