The Error in the Console

[eqaderi]

I get this error:
odoo.js:1 Uncaught TypeError: Cannot read property 'setAttribute' of null
at e.default (http://localhost:9001/js/plugins/odoo.js:1:5038)
at step (http://localhost:9001/js/plugins/odoo.js:1:4271)
at Object.b as update
at http://localhost:9001/js/plugins/odoo.js:1:4622
at Array.forEach (native)
at q (http://localhost:9001/js/plugins/odoo.js:1:4593)
at a (http://localhost:9001/js/plugins/odoo.js:1:803)

[coderitual]

Hi, I encountered this bug recently. Are you using pure odoo.js library or along with other library that manipulates the DOM (eg. React)?

[eqaderi]

I'm using Barba.js to have fluent page transitions. this happens when I click the button that takes me to the other page. odoo still works but the console is overwhelmed with this error

[coderitual]

Ok i get it. What you need to do is to cancel animation from being processed by calling what is returned by the odoo (or odoo.default if you don't use es6 modules).

const cancel = odoo.default({ el: '.js-odoo', value: '£42,000,000' });
cancel();

This cancels outgoing animation and prevents these errors.

You need to call cancel before DOM element related to the previous view is removed.

[eqaderi]

So you mean to cancel the animation I have to call the function again?! because I think that's what you did!!
you call it once it starts then you call it again it stops?!

[coderitual]

This is a different function. Calling odoo returns function which you can call to cancel animation.

[eqaderi]

Thank you! it solved the issue.

[eqaderi]

Hi, I solved this problem some how but I don't know why it's back again!

here are the codes that I've been using:

`
function number_counter() {

    $(".number-conter").each(function() {
        var el = $(this).find(".odometer"),
            scene = new ScrollMagic.Scene({
                triggerElement: this,
                triggerHook: "onEnter"
            })
            .on("start", function() {
                el.each(function() {
                    odoo.default({
                        el: this,
                        value: $(this).data('number-end'),
                        lineHeight: 1.1,
                        letterSpacing: -4,
                        // animationDelay: 100,
                        // letterAnimationDelay: 100
                    });
                });
            })
            .addTo(scrollMagicController)
            // .addIndicators()
            .reverse(false);
    });
}
number_counter();

const cancel = odoo.default({ el: '.odometer', value: '£42,000,000' });
cancel();

`

I'm using ScrollMagic so the odoo animation occurs when I reach the part in the page where it is!

what should I do? I get lots of error when I go to the other page.

[eqaderi]

I think this happens because I don't give it the time to complete the animation, If I run cancel after the animation is done the would be no errors!

[coderitual]

Hm, I need to reproduce it. Maybe you are right and this has something to do with canceling ongoing animation. Will check this soon.

[coderitual]

Hi again. I double check that and it seems that canceling (even multiple) animations works just fine:

const cancel = odoo.default({ el:'.js-odoo',value:'£42,000,000' });
setTimeout(cancel, 1000);

const cancel2 = odoo.default({ el:'.js-odoo2',value:'£42,000,000' });
setTimeout(cancel2, 1000);

What I can see in your example is that you are cancelling only the last odoo instance and to make it work properly you need to cancel each of .number-conter odoo instance in number_counter() as well.

[eqaderi]

Hello Mike @coderitual
OK, so this is what I have done:

function number_counter() {

    $(".number-conter").each(function() {
        var el = $(this).find(".odometer"),
            scene = new ScrollMagic.Scene({
                triggerElement: this,
                triggerHook: "onEnter"
            })
            .on("start", function() {
                el.each(function() {
                    odoo.default({
                        el: this,
                        value: $(this).data('number-end'),
                        lineHeight: 1.1,
                        letterSpacing: -4,
                    });

                    const cancel = odoo.default({
                        el: this,
                        value: $(this).data('number-end'),
                    });
                    setTimeout(cancel, 4000);
                });
            })
            .addTo(scrollMagicController)
            .reverse(false);
    });
}
number_counter();

And this is what I get in the console even before browsing to another page! just as soon as the animation initiates the error appear in the console, in the browser though and where the users see everything works fine and there is no issue:

[eqaderi]

30 thousand errors!!

[coderitual]

Hi, at the moment i can see one misconception in your code:

You are calling odoo.default twice in .each function. You should only call it once per element and get cancel method in the first call.

el.each(function() {
  const cancel = odoo.default({
    el: this,
    value: $(this).data('number-end'),
    lineHeight: 1.1,
    letterSpacing: -4,
  });
  setTimeout(cancel, 4000);
});

Could you try it?

[eqaderi]

This solves the the errors on first initiation! but there 1 problem:
If I browse to the other page BEFORE scrolling down and running the animations these error happen:

user might browse to the other page before scrolling down!

Sorry I know this has took so long it's become exhausting but I'm stuck here! and I appreciate your help so much

[eqaderi]

This was the function that I used:

function number_counter() {

    $(".number-conter").each(function() {
        var el = $(this).find(".odometer"),
            scene = new ScrollMagic.Scene({
                triggerElement: this,
                triggerHook: "onEnter"
            })
            .on("start", function() {
                el.each(function() {
                    const cancel = odoo.default({
                        el: this,
                        value: $(this).data('number-end'),
                        lineHeight: 1.1,
                        letterSpacing: -4,
                    });
                    setTimeout(cancel, 4000);
                });
            })
            .addTo(scrollMagicController)
            .reverse(false);
    });
}
number_counter();

[eqaderi]

There was just one problem, I said 2 at first it was a mistake and I updated the comment!

[coderitual]

Ah ok. Do you have some published example online so I could see this bug in your setup?

[coderitual]

This should be fixed. Closing.