CODEWITHSUNDEEP
javascriptdomprototypejs
hhoud
hhoud

Reputation: 518

Prototype.js get text from an element

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?

Upvotes: 7

Views: 21596

Answers (4)

Yash Patadia
Yash Patadia

Reputation: 462

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)

Upvotes: 0

Stefaan Colman
Stefaan Colman

Reputation: 3705

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

Upvotes: 1

user113716
user113716

Reputation: 322562

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;
});

Upvotes: 7

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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

Upvotes: 0

Related Questions