getElementById innerHTML undefined

Question

When I have item1 and item2 in the same <div class>, item2 returns world but item1 returns undefined.

function Delivered(xCode, tNo) {
    document.getElementById("item1").innerHTML = "hello";
    document.getElementById("item2").innerHTML = "world";
}

However if I just delete <span id="item2"></span>, item1 reports hello again.

<div id="details"> 
    <div class="right" id="rightDIV">content...<span id="item1"></span>..inserted here</p>
    <p> more content...<span id="item2"></span>
    </div>
</div>

I tried placing item2 in a new <div class> but was still unsuccessful. What am I doing wrong?

Edit: Can I post the original code? Sorry, first post.

<div id="details"> 
    <div class="left" id="leftDIV">item: <b><span id="item3"></span></b>
    <p>via <b>airmail;</b></p>
    </div>
    <div class="right" id="rightDIV">Status: <b>active</b>
        <p>item with reference <span id="item1"></span> content here <span id="item2"></span></p>
        <p>Thank you&trade;</p>
    </div>
</div>

Here is my script:

#details { 
  height:200px; 
  width:600px; 
  font-family: Tahoma;
  color: #000; 
  margin: 0px;
  font-size: 12px; 
}
#details .left{ 
  width:33%; 
  height:200px; 
  padding: 15px; 
  background-color: #fff; 
  float: left;
  overflow:hidden;
  visibility: hidden;
}
#details .right{ 
  width:40%;
  height:200px; 
  padding: 15px; 
  background-color: #ccc; 
  float: left;
  overflow:hidden;
  visibility: hidden;
}

function Delivered(xCode, tCode) {
  document.getElementById("leftDIV").style.visibility = "visible";
  document.getElementById("rightDIV").style.visibility = "visible";
  document.getElementById("item3").innerHTML = tCode;
  document.getElementById("item1").innerHTML = tCode;
  document.getElementById("item2").innerHTML = xCode;
}

I'm not sure how much code to paste as I'm not sure whats relevant :)

Answer 1

You forgot to call the function after you wrote the js code.

function Delivered(xCode, tNo) {
    document.getElementById("item1").innerHTML = "hello";
    document.getElementById("item2").innerHTML = "world";
} 

Delivered();

And in the html you have p element closed but you never opened one

 <div id="details"> 
   <div class="right" id="rightDIV">
    content...<span id="item1"> </span>..inserted here</p> -----> Here
    you opened but never closed <--------- <p>more content...<span id="item2"></span>
    </div>
</div>

Do it like this in Js

function delivered(xCode, tNo) {
    document.getElementById("item1").innerHTML = "hello";
    document.getElementById("item2").innerHTML = "world";
}

delivered();

And html like this

<div id="details"> 
   <div class="right" id="rightDIV"><p>content...<span id="item1"></span>..inserted here</p>
       <p> more content...<span id="item2"></span></p>
   </div>
</div>