Learn how to a build a cloud-first strategyRegister Now


Prototype: I'm unable to get the text from a div - I've used both innerHTML and DOM access methods, yet neither work

Posted on 2006-04-06
Medium Priority
Last Modified: 2007-12-19
If you go to this page and scroll down a bit:


You'll see a red box with text in it. The box is narrow and tall. You can see the text with your eyes. This box is created dynamically, as you can see in the code below.

When I try to get the contents of the box, I get nothing. I've tried using innerHTML and I get a blank. I've also tested for childNodes and I get zero. You can see the zero and the blank in the final alert() that I call. What might be the right way to access the contents of this box?

Here is the function I call on the page:

function getPopularTagsFromAccumulist() {
  // 04-06-06 - when people enter a new item into Accumulist.com or Mp3Classifieds.com we want
  // the form to auto-suggest to them what some likely categories might be. So, for instance,
  // on this page:
  // http://www.accumulist.com/index.php?whatPage=addAnEntry.php
  // where the visitor might type in "General Category" we want to suggest something in the same
  // way that flickr and del.icio.us do.
  // The first step in the process is to get the most popular tags in the Accumulist database. We
  // will use Prototype to fetch this info for us from this page:
  // http://www.accumulist.com/output.php?whatPage=showTagCloudWithCommas&howManyTagsToGet=200
  // but even before that, we must create a place where the result can be stored. We don't need
  // to make this container visible on screen.
  var containerForPopularTagsTextArea = document.createElement("div");
  containerForPopularTagsTextArea.id = 'output-div';
  containerForPopularTagsTextArea.style.backgroundColor = "#944";
  containerForPopularTagsTextArea.style.height = "800px;";
  containerForPopularTagsTextArea.style.width = "200px;";
  var refToBody = document.getElementById("main");
  var url = "http://www.accumulist.com/output.php";
  var pars = 'whatPage=showTagCloudWithCommas&howManyTagsToGet=200';
  var target = 'output-div';
  var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
  var refToTagDiv = document.getElementById("output-div");
  var nodeNumber = refToTagDiv.childNodes;
  var contentsOfContainer = refToTagDiv.innerHTML;
  var containerValue = refToTagDiv.value;
  alert ("the number of nodes: " + nodeNumber.length + " and the wrods: "   + contentsOfContainer  + containerValue);

Question by:lkrubner

Accepted Solution

lkrubner earned 0 total points
ID: 16397495
Okay, I figured this one out myself - I was looking for the answer before the answer had returned from the server. With this asynchronous stuff, it is important to make sure the call to the server has returned, before you go looking for some value.
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16398445
You may ask for a delete and refund here: http://www.experts-exchange.com/Community_Support/

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question