Prototype.js get text from an element

Question

I'm new to Protoype.JS and just testing it a bit because I heard it was good, but I'm stuck quite quickly. As easy as this is with jQuery, it seems to be the end of the world to get the text in an element. I've tried innerHTML in multiple ways but the only thing I can get is "undefined".

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

None of these work. Content is a div with id "content" and .mnu_item is an anchor tag with class ".mnu_item". I don't get what the problem is, probably something stupid but it would be great if somebody could point me in the right direction!

EDIT: I've found that it isn't the innerHTML that doesn't work but it's the class selector. The second line in the code above does work. How can I select an element by its class in the latest Prototype version if this isn't the correct way?

use jQuery, and just call $('content').html(); to retrieve html — Senad Meškin
– Senad Meškin, Commented Jan 24, 2011 at 14:31
Educational rhyme: It's quite hard to tell without the HTML. — acme
– acme, Commented Jan 24, 2011 at 14:35

user113716 · Accepted Answer · 2011-01-24 14:40:08Z

7

Has the DOM loaded when you run your script? If you're not running this code in a window.onload or by placing it at the end of the body, then the elements by not exist when it runs.

Try placing your script just inside the closing </body> tag.

<body>
    <!-- my content -->

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

Also, your first line is selecting correctly, but will return an Array of elements, so innerHTML will be undefined.

To iterate the Array, you can do this:

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

or if you want to end up with an Array of the innerHTML values, do this:

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

edited Jan 24, 2011 at 14:40

answered Jan 24, 2011 at 14:33

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hhoud Over a year ago

Hey thanks! I didn't know it was returning an array, as I said, pretty stupid problem.

Stefaan Colman · Accepted Answer · 2011-01-24 14:52:22Z

1

Make sure the DOM is loaded before you run these tests:

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

The first line of code $$('.mne_item') doesn't work because $$ gives back an array of all elements matching the css rule. So $$('.mne_item') gives an array of all dom elements which has the class mne_item. You can ask the first one by using the first method or iterate over all items 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 the each construct. It just applies the chained method to all elements or just the first.

The second line of code $('content').innerHTML should work. $ is a shortcut for document.getElementById so it should give you a DOM node back. The reason why this doesn't work is there is no node where id = content, probably because the dom isn't loaded yet.

For more info about the methods of prototype look at the api: http://api.prototypejs.org/

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

answered Jan 24, 2011 at 14:52

Stefaan Colman

3,7152 gold badges24 silver badges12 bronze badges

2 Comments

HenchHacker Over a year ago

Is there any difference using $(document).on('dom:loaded', function () {...}); as opposed to document.observe('dom:loaded', function () {...}); i'm assuming not... never seen dom:loaded used on on() before :/

Stefaan Colman Over a year ago

They act the same, on is a newer method that also can handle a selector argument (see API)

Diodeus - James MacFarlane · Accepted Answer · 2011-01-24 14:29:33Z

0

$('content').innerHTML should work. Check your HTML, ensure the ID is unique.

answered Jan 24, 2011 at 14:29

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Yash Patadia · Accepted Answer · 2017-06-28 08:57:47Z

0

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

Above code worked for me.

Regarding, $$('.mnu_item').innerHTML

When you are trying to fetch with class selector, prototype returns array of multiple elments, by using [0] or first() method system will point at the first element in that array, after that you can use innerHtml (to get html inside the element) or textContent (to get text content of that element, native javascript method)

answered Jun 28, 2017 at 8:57

Yash Patadia

4625 silver badges6 bronze badges

Collectives™ on Stack Overflow

Prototype.js get text from an element

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related