The script fails to execute upon the loading of the view

Question

The script fails to execute upon the loading of the view

I am facing an issue with a simple JavaScript code that aims to target an element within an angular view:

var buttons = document.querySelectorAll('.msg-type i');
console.log(buttons.length);

When I run this code, it incorrectly prints out 0 on the console, even though there are actually 3 elements present on the page.

The root of the problem lies in the fact that my script is embedded in the index page rather than directly in the view itself. I want to avoid breaking up my script into smaller parts to prevent multiple HTTP requests and ultimately reduce load time.

Is there a way for me to execute this script as soon as my view loads?

javascript angularjs

Answer 1

Answer №1

Run this script after the page loads, as long as it's not already at the bottom of the document

window.addEventListener("DOMContentLoaded", function() { 
    var buttons = document.querySelectorAll('.msg-type i');
    console.log(buttons.length);
});

Answer 2

Run this script after the page loads, as long as it's not already at the bottom of the document

window.addEventListener("DOMContentLoaded", function() { 
    var buttons = document.querySelectorAll('.msg-type i');
    console.log(buttons.length);
});

Answer 3

Answer №2

To solve this issue, all you need to do is create a new function and then invoke it within the view controller:

script.js:

const initialize = function() {
     const elements = document.querySelectorAll('.element-class');
     console.log(elements.length);
}

controller.js:

myApp.controller('ControllerName', function($scope) { 
     initialize();
});

Answer 4

To solve this issue, all you need to do is create a new function and then invoke it within the view controller:

script.js:

const initialize = function() {
     const elements = document.querySelectorAll('.element-class');
     console.log(elements.length);
}

controller.js:

myApp.controller('ControllerName', function($scope) { 
     initialize();
});

The script fails to execute upon the loading of the view

Answer №1

Answer №2

Similar questions

Navigate to a different state with ui-router upon entering the page

Troubleshooting: WordPress post not uploading to custom PHP file - Issue causing ERROR 500

The selected value is not being displayed correctly when the data is retrieved from the server

Executing jQuery script on dynamically loaded content

Executing the main process function

enhancing angular directives with data binding while replacing HTML content inside the compile function

How to retrieve an Angular scope variable from outside the Angular framework

The issue of excessive recursion in Typescript

Accessing multi-dimensional array properties in PHP with JavaScript integration

Using npm to install angular-jsdoc

Is the function added using Restangular's extendModel method not working properly?

Simulating a traditional table scroll function on a window using virtualization

Creating numerous bar graphs for each specific date

Implementing a custom button specifically for the month view in JavaScript FullCalendar

Tips for passing a function reference within a recursive directive in AngularJS

Issues with managing multiple user sessions in express-session

Issue in Jquery: Unable to load the corresponding pages when toggling the checkbox on and off

Redirecting clients on form submission from the client side

I continue to encounter the same error while attempting to deliver data to this form

issue with node callback function - code malfunctioning