#When navigating to a route from a button link, the javascript does not work?

6 messages · Page 1 of 1 (latest)

azure ruin
#

Hi all, when I go to http://localhost:4200/myroute , a script is supposed to trigger:

 bar = document.querySelector('.progress-bar'),
    counter = document.querySelector('.count'),
    i = 0,
    throttle = 0.2; // 0-1

(function draw() {
  if(i <= 100) {
    var r = Math.random();
    
    requestAnimationFrame(draw);  
    bar.style.width = i + '%';
    counter.innerHTML = Math.round(i) + '%';
    
    if(r < throttle) { // Simulate d/l speed and uneven bitrate
      i = i + r;
    }
  } else {
    setTimeout(function() {
        bar.className += ' done'; // Add the "done" class for fading effect
        counter.style.transition = 'opacity 1s'; // Apply transition to counter
        bar.style.opacity = '0'; // Fade out the bar
        counter.style.opacity = '0'; // Fade out the percentage
      }, 1500); 
    setTimeout(function() {
        $('#progress-bar-container').addClass('hidden') 
        $('.carousel-container').removeClass('hidden')
        
    },1500)
  }
})();

It's kind of a loading bar.
It triggers when I manually type in the browser the link to the route. However, when trying to redirect using a routerlink:

    <div class="row justify-content-center">
        <div class="glowing-btn-wrapper mt-3 mr-3">
        <button type="submit" class='glowing-btn' [routerLink]="'/recommendit'" routerLinkActive="router-link-active" >
            <span class='glowing-txt'>G<span class='faulty-letter'>E</span>NERATE</span>
        </button>
        </div>

The script does not work and the browser console writes errors: ```js
Uncaught TypeError: Cannot read properties of null (reading 'style')
at draw (scripts.js:103:9)
at timer (zone.js:2402:41)
at _ZoneDelegate.invokeTask (zone.js:403:31)
at _Zone.runTask (zone.js:174:47)
at invokeTask (zone.js:484:34)
at ZoneTask.invoke (zone.js:473:48)
at data.args.<computed> (zone.js:2382:32)

Many times per second.
azure ruin
#

update: I transfered the script to trigger when the page is initialized: ```ts
ngOnInit() {
const bar = this.elementRef.nativeElement.querySelector('.progress-bar');
const counter = this.elementRef.nativeElement.querySelector('.count');

let i = 0;
const throttle = 0.5; // 0-1

if(!bar || !counter){
  console.error("Progress bar or the counter could not be found.")
  return;
}

(function draw() {
if(i <= 100) {
  var r = Math.random();
  requestAnimationFrame(draw);  
  bar.style.width = i + '%';
  counter.innerHTML = Math.round(i) + '%';
  
  if(r < throttle) { // Simulate d/l speed and uneven bitrate
    i = i + r;
  }
} else {
  setTimeout(function() {
      bar.className += ' done'; // Add the "done" class for fading effect
      counter.style.transition = 'opacity 1s'; // Apply transition to counter
      bar.style.opacity = '0'; // Fade out the bar
      counter.style.opacity = '0'; // Fade out the percentage
    }, 1500); 
  setTimeout(function() {
      $('#progress-bar-container').addClass('hidden') 
      $('.carousel-container').removeClass('hidden')
      
  },1500)
}

})();

but I get a reference error:
# 
ERROR ReferenceError: requestAnimationFrame is not defined
    at draw (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/src/app/pages/recommendit/recommendit.component.ts:33:7)
    at _RecommenditComponent.ngOnInit (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/src/app/pages/recommendit/recommendit.component.ts:53:3)
    at callHookInternal (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:6117:14)
    at callHook (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:6144:13)
    at callHooks (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:6099:17)
    at executeInitAndCheckHooks (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:6049:9)
    at refreshView (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:12115:21)
    at detectChangesInView (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:12324:9)
    at detectChangesInViewIfAttached (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:12287:5)
    at detectChangesInEmbeddedViews (d:/consoleProjects/ShowPulse/frontend/showpulse-frontend/node_modules/@angular/core/fesm2022/core.mjs:12244:13)
azure ruin
#

fixed, if anyone is interested the solution was to verify that the requestAnimationFrame is in the browser environment: ```ts
constructor(private elementRef:ElementRef, private renderer:Renderer2, @Inject(PLATFORM_ID) private platformId:Object) {
}

if(isPlatformBrowser(this.platformId)){
//rest of the code
requestAnimationFrame

hidden locust
#

I also think a solution to this would be using ngOnViewInit() instead of ngOnInit(). This means that the query selector would be able to find the element because the code would run after the page is loaded instead of before its loaded.

#

Not 100% sure though 😁