I want to call a function whenever a page's window is resized and when the page is first rendered. To do this, I am currently using the code below:
window.addEventListener('resize', function(event){
// Here will be my function
});This calls the function every time the window is resized, but will the function be called when the page first renders? If no, how can this be done?
EDIT:.
I've updated my code so that it looks like this snippet:
window.onload = (event) => {
callName()
window.addEventListener('resize', function(event){
callName()
});
};
function callName(){
console.log('Hi Neo!')
}Will this work?
function callName(){
// Your functionality here...
console.log('Hi Neo!')
}
window.onload = () => {
callName()
window.addEventListener('resize', callName);
}
Pen here: https://codepen.io/freedruk/pen/MWobaao
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>
<script>
// Defining event listener function
function displayWindowSize(){
// Get width and height of the window excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// Display result inside a div element
document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
// Attaching the event listener function to window's resize event
window.addEventListener("resize", displayWindowSize);
// Calling the function for the first time
displayWindowSize();
</script>
<p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>
You can use this as a example to get your desired result.