[SOLVED] object referencing

[friedemann_bach]

I have a large text (XML) document in which I want to provide a javascript function for each word. Let us assume that each word in the text is tagged with a word number. So I could use a DOM reference to do operate with the words and their properties. Of course, this means that the source code is quite heavy, but I cannot change that.

 

<p id="paragraph_1"><span id="word_1">1.</span> <span id="word_2">Von</span> <span id="word_3">Erhard</span> <span id="word_4">Friedrich</span> <span id="word_5">Vogel.</span> <span id="word_6">Rehau,</span> <span id="word_7">6.</span> <span id="word_8">Mai</span> <span id="word_9">1781,</span> <span id="word_10">Sonntag</span></p>

 

Now let us assume that I need to return the word number for each word the user clicks on, and also the word itself, together with the paragraph number in which the word appears. Would I need to define an event handler for each word? Like this:

 

<span id="word_8" onclick="alert(this.id)">Mai</span>

 

But if I had to define the event handler for every word, this would result in a clumsy mass of code, as my texts usually contain about 500-1000 words.

 

Would it be possible instead to define an event handler for, lets say, a paragraph, that is still able to return the word id?

 

<p id="paragraph_1" onclick="alert( ... my word id ...? )">

 

Or is there a better approach than JavaScript?

 

[KevinM1]

Is every word wrapped within a span tag?  If so, unobtrusive JavaScript is your best bet:

<script type="text/javascript">
   window.onload = function()
   {
      var words = document.getElementsByTagName('span');

      for(var i = 0; i < words.length; i++)
      {
         words[i].onclick = function()
         {
            alert(this.id);
         }
      }
   }
</script>

.
.
.

<span id="word_56">blah</span>

 

As you can see, all JavaScript is placed within script tags and not embedded in the markup, which is the way JavaScript should be used.  Keeping it separate from the rest of the document ensures that both are easy to edit and maintain, and allows you to apply scripting logic to the entire document in a top-down manner.  As you can see, it's much more efficient to access an array of span elements and apply an event handler to each in a simple for-loop than it is attempting to add an onclick event handler to each element manually within the markup.

[friedemann_bach]

Thanks! I've learned something. That was exactly the solution I was looking for.

 

[obsidian]

Nightslyr has the right of it, but keep in mind you may have to play with the specificity of the JavaScript selector when you retrieve your words. As it is, the code posted assumes that every span in the document is a word you are after. So you may have to do a little more formalization to determine that you only retrieve the WORDS you are looking for.

 

Another idea would be to forget the whole span thing and let JavaScript parse the whole text block for you, counting the words as you go. In other words, you could retrieve the P tag, grab all the child elements and then run your counter as you parse over all the children.

[KevinM1]

Nightslyr has the right of it, but keep in mind you may have to play with the specificity of the JavaScript selector when you retrieve your words. As it is, the code posted assumes that every span in the document is a word you are after.

 

Definitely a good point.  With my solution, if there are any "non-word" spans floating about, they'll all have the same onclick function.  This could cause problems, as you probably don't want every span to be clickable, and you certainly wouldn't want those spans without ids alerting the user to an undefined property.

 

Like Obsidian said, there are ways around that.  I'd probably start off the same way as above - get the array of all spans by using getElementsByTagName - then I'd loop through those to see which had an id of "word_xx".  Those with such an id get added to another array, which I'd then loop through and add onclick event handlers to.