Javascript animate for multiple ids-CodePudding

I'm using this Javascript function for animate text change:

function changeText(id, newText) {
    item = document.getElementById(id);
    if (item === null) {
        return false
    }
    let animation = item.animate([
        // keyframes
        {transform: 'translateY(0px)', opacity: '1'},
        {transform: 'translateY(1px)', opacity: '0.9'},
        {transform: 'translateY(4px)', opacity: '0.7'},
        {transform: 'translateY(9px)', opacity: '0.5'},
        {transform: 'translateY(14px)', opacity: '0.3'}

    ], {
        // timing options
        duration: 500,
    });
    animation.onfinish = function () {
        item.innerText = newText;
        item.animate([
            // keyframes
            {transform: 'translateY(14px)', opacity: '0.3'},
            {transform: 'translateY(9px)', opacity: '0.5'},
            {transform: 'translateY(4px)', opacity: '0.7'},
            {transform: 'translateY(1px)', opacity: '0.9'},
            {transform: 'translateY(0px)', opacity: '1'}
        ], {
            // timing options
            duration: 500,
        });
    };
}

If i'm using the funtion for a single element, it works fine:

changeText('random1', Math.floor(Math.random() * 100)   "°")

But if i'm using for two different element not:

changeText('random1', Math.floor(Math.random() * 100)   "°")
changeText('random2', Math.floor(Math.random() * 100)   "°")

It will update only one of the two element, the second one.

There is any technical reason why i can't use for different IDs? How can i solve? Thanks

EDIT: A JFiddle for testing: https://jsfiddle.net/5yf7gcjw/

CodePudding user response：

Declare item using let or const to avoid it becoming a global variable.

const item = document.getElementById(id);

function changeText(id, newText) {
    const item = document.getElementById(id);
    if (item === null) {
        return false
    }
    let animation = item.animate([
        // keyframes
        {transform: 'translateY(0px)', opacity: '1'},
        {transform: 'translateY(1px)', opacity: '0.9'},
        {transform: 'translateY(4px)', opacity: '0.7'},
        {transform: 'translateY(9px)', opacity: '0.5'},
        {transform: 'translateY(14px)', opacity: '0.3'}

    ], {
        // timing options
        duration: 500,
    });
    animation.onfinish = function () {
        item.innerText = newText;
        item.animate([
            // keyframes
            {transform: 'translateY(14px)', opacity: '0.3'},
            {transform: 'translateY(9px)', opacity: '0.5'},
            {transform: 'translateY(4px)', opacity: '0.7'},
            {transform: 'translateY(1px)', opacity: '0.9'},
            {transform: 'translateY(0px)', opacity: '1'}
        ], {
            // timing options
            duration: 500,
        });
    };
}
changeText('random1', Math.floor(Math.random() * 100)   "°")
changeText('random2', Math.floor(Math.random() * 100)   "°")

<div id="random1">
  Random1
</div>
<div id="random2">
  Random2
</div>