Geek Answers Handbook

Prototype.js gets text from an element

I am new to Protoype.JS and just testing it a bit because I heard it is good, but I got stuck pretty quickly. As easy as with jQuery, it seems like the end of the world should get the text in the element. I tried innerHTML in several ways, but the only thing I can get is "undefined".

alert($$('.mnu_item').innerHTML); alert($('content').innerHTML);

None of these works. Content is a div with the identifier "content", and .mnu_item is an anchor tag with the class .mnu_item. I don’t understand what the problem is, maybe something stupid, but it would be great if someone could point me in the right direction!

EDIT: I found innerHTML not working, but it is a class selector. The second line in the code above works. How can I select an element by its class in the latest version of Prototype, if it is not?

+6
javascript dom prototypejs
source share
4 answers

Is the DOM loaded when the script starts? If you do not use this code in window.onload or put it at the end of the body, then the elements do not exist when it is executed.

Try placing the script only inside the closing </body> .

 <body> <!-- my content --> <script type="text/javascript"> alert($('content').innerHTML); </script> </body>

Also, your first line selects correctly, but will return an array of elements, so innerHTML will be undefined .

To iterate over an array, you can do this:

 $$('.mnu_item').each(function(val,i) { alert(val.innerHTML); });

or if you want to get an array from innerHTML values, follow these steps:

 var values = $$('.mnu_item').map(function(val,i) { return val.innerHTML; });
+6
source share

Before performing these tests, make sure the DOM is loaded:

 $(document).on('dom:loaded', function () { /* code to execute after dom has loaded */ })

The first line of code $$ ('. Mne_item') does not work because $$ returns an array of all elements matching the css rule. So $$ ('. Mne_item') gives an array of all dom elements that have the mne_item class. You can specify the first option using the first method or iterate over all elements like this:

 $$('.mne_item').each(function(elem) { // elem is the li elements extended by all Element methods of prototype });

If you use $ in jQuery, it actually uses a similar pattern, but hides each construct. It simply applies the chained method to all elements, or just the first one.

The second line of code is $ ('content'). innerHTML should work. $ is a shortcut for document.getElementById , so it should give you a DOM node back. The reason this does not work is that there is no node where id = content, possibly because dom is not loaded yet.

See api for more details on prototype methods: http://api.prototypejs.org/

Also check the default DOM methods: http://quirksmode.org/dom/w3c_core.html

+1
source share

$ ('content'). innerHTML should work. Check your HTML, make sure the identifier is unique.

0
source share

var text = $$ ('label [for = "display_on_amazon"]'). first (). textContent;

The code worked on me.

Relatively, $$ ('. Mnu_item'). innerHTML

When you try to extract using the class selector, the prototype returns an array of several elites using the [0] or first () method, will point to the first element in this array, after which you can use innerHtml (get html inside the element) or textContent ( get the text content of this element, javascript native method)

0
source share

More articles:


All Articles