How to choose multiple classes not ids in Javascript

Question

I need to choose multiple classes in Javascript and to make it to work for slide effect on hover. The elements should be in <span> tag.

First element is working:

<p id="tweet1">First long text displayed fully on hover</p>

Second element, third element and etc is not working:

<span class="tweet1">Second long text displayed fully on hover</span>

<span class="tweet1">Third long text displayed fully on hover</span>

JavaScript:

var tweet = document.getElementById('tweet1');
tweet.id = 'tweet1';
tweet.className = 'hiding';

var slide_timer,
    max = tweet.scrollWidth,
    slide = function () {
        tweet.scrollLeft += 2;
        if (tweet.scrollLeft < max) {
            slide_timer = setTimeout(slide, 40);
        }
    };

tweet.onmouseover = tweet.onmouseout = function (e) {
    e = e || window.event;
    e = e.type === 'mouseover';
    clearTimeout(slide_timer);
    tweet.className = e ? '' : 'hiding';
    if (e) {
        slide();
    } else {
        tweet.scrollLeft = 0;
    }
};

CSS:

#tweet1 {
    overflow:hidden;
    white-space:nowrap;
    width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

Full code on JSFiddle: http://jsfiddle.net/27uuj/3/

Answer 1

You need it to use gelElementsByClassName(). So the changes to your code would be:

<p class="tweet1">First long text displayed fully on hover</p>

var tweet = document.gelElementsByClassName('tweet1');

Answer 2

That's because document.getElementById('tweet1'); gets an element by its "id" and not by a class. (There's a reason it's named that way.) You probably want getElementsByClassName() instead.