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

Dynamic web page updates from server using an Ajax request

Are the Bootstrap columns arranged in a vertical stack instead of side by side?

Convert checkbox choices to strings stored in an array within an object

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I am currently attempting to generate a chart that displays information on countries utilizing the restcountries API. Despite being a beginner in this area, I have encountered some challenges and am seeking guidance

Why aren't Material UI v5 styles being applied to the class?

The module 'myapp' with the dependency 'chart.js' could not be loaded due to an uncaught error: [$injector:modulerr]

Unique column arrangement specifically designed for the initial row within the loop

"Creating a Hyperlink that Navigates to Specific Content Within a

Struggling to connect HTML elements with AngularJS and TinyMCE?

Advantages of optimizing NodeJS/TypeScript application by bundling it with webpack

Ways to efficiently manage session control without repeating it in each route

The attempted creation of the ui.tree module failed with the error: [$injector:nomod] Unable to find module 'moduleName'! This could be due to a misspelling of the module name or

Navigating through an array in Pug

Problem with RadioButton click event not triggering

Iterating through a JSON query in AngularJS using the ng-repeat directive

Formatting ternary expressions in VueJS

Disabling Scrolling in AngularJS Material Tab Components

ArangoDB's graph maxDepth setting causing excessive iterations

Vue component fails to react to updates from Vuex