javascript - getElementById sometimes works, and sometimes doesn't -

i working on small windows 8 application , have annoying problem. first of here html:

<h2 id="name" class="article-title win-type-ellipsis" data-win-bind="textcontent: title"></h2> <h4 id="price" class="article-subtitle" data-win-bind="textcontent: price"></h4> 

and here javascript:

order.addeventlistener("click", function (e) {     data.add(document.getelementbyid("price").innertext);     var name = document.getelementbyid("name").innertext;     var msg = windows.ui.popups.messagedialog(name + " added.");     msg.showasync(); }); 

the javascript works when getting "price" element reason decides not work when getting "name" element, message " added.".

there no other element id "name" , lost @ why doesn't work.

edit: there seems confusion why both html tags empty in code have provided. bind text javascript file , working because when run application, there text in tags, problem reason able grab price element, not name element.

try following html:

<h2 id="name" class="article-title win-type-ellipsis" data-win-bind="textcontent: title"></h2> <h4 id="price" class="article-subtitle" data-win-bind="textcontent: price">0.00</h4>