javascript - 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?

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

Share Improve this question edited Jan 24, 2011 at 14:33 asked Jan 24, 2011 at 14:23 hhoud 5182 gold badges6 silver badges18 bronze badges

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

Add a ment |

4 Answers 4

Sorted by: Reset to default 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;
});

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/

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

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

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)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Prototype.js get text from an element - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)