How do I get this function to work?

Hi all,

I’d like to save a browser screen width to a variable (as a number) and compare this against a fixed integer which will stand in for mobile screen size.

So far, I think the variables I’m storing are number types, so I’m not sure where I’m going wrong in my if statement.

I’m finding this tricky, could anyone offer advice?

JavaScript musings
// x coordinate refers to horizontal width
// y coordinate refers to vertical height

// Measure screen height and width

let screenSizeY = window.screen.height;
let screenSizeX = window.screen.width;

// Test in console

console.log(screenSizeX);

// Assign X and Y variables to HTML id's

let browserWindowY = window.innerHeight;
let browserWindowX = window.innerWidth;

// is variable saved as number?
console.log(typeof browserWindowX)

let mobileScreenX = 550;

// Use function to move box according to window size

// Use function to define mobile, tablet and desktop browser size

// Function is it mobile

function isItMobile(browser, mobile) {
if (browser > mobile) {
        return 'It isn\'t mobile'
}
else {
        return 'It\'s mobile'
}
}

window.onresize = isItMobile(browserWindowX,mobileScreenX);

console.log(isItMobile);

This isn’t quite how you set window.onresize. You can either set it equal to the name of a function:

window.onresize = isItMobile;

Or you can define the entire function:

window.onresize = (e) => { ... };

The e parameter is the event object that is automatically passed into the function (it will be passed into isItMobile as well if you use the first option). With the second option you could then call isItMobile inside of the function body, passing in the two arguments.

Speaking of those two arguments, mobileScreenX seems like a constant value to me so you should probably use const instead of let. You set browserWindowX initially but then never again, so you are always going to be passing in the initial value of window.screen.width even after you resize the browser. I don’t think you need to pass this value into the function. Wouldn’t it make more sense to get the most recent value of window.screen.width inside the function before you compare it to the mobile width?

Also, having isItMobile return a string doesn’t make too much sense here since you’re using it as an event handler. Did you mean to print those strings to console.log instead?

Thanks for the reply bbsmooth. I’m still a little bit confused. It may just be something that I have to come back to at a later point. My issue is that I can’t see the results in console.log.

I’ll have to look at the arrow functions as I’m not sure how to incorporate these variables as arguments into it…

The idea is for the browser size to be fluid and measured on resize. Then I’d like to compare that size to a mobile size. Here is another version of what I’m going for

js
// Assign X and Y variables base value

let browserWindowY = 0;
let browserWindowX = 0;

// Function to record value of browser height and width

function reportWindowSize() {
browserWindowY = window.innerHeight;
browserWindowX = window.innerWidth;
}

// Call function with event onresize

window.onresize = reportWindowSize;

console.log(reportWindowSize)```

I may just have to put this to the side for a little while… I appreciate your help though. So thanks :slight_smile:

You’re almost there. You have set up the handler properly, the reportWidthSize function is being called each time the browser resizes. But the only thing you are doing in that function is setting the value of two variables. I thought you wanted to compare the current width of the browser to a constant mobile width? Why don’t you do that in the function? I’m not sure what you want to do with that comparison, but if you want to print something out in the console so you can see it then you have to use console.log.

1 Like

your function doesnt return a value, nore it prints console.log, so there is nothing for you to see. console.log(reportWindowSize) would print the value inside the parenthesis, which is a function. If you were to say console.log('some string'), it will return a string. If you say console.log(reportWindowSize())(notice the parenthesis after the function- i call it to be executed), it would execute the function and log whatever value it returns. The problem is your function does not return anything.

What you try to make has different approaches to handle.
I first wanna clear up, why we say window.onresize=functionName and not window.onresize=functionName(). For the same reason i use the opposite syntax to provide in console.log. window.onresize will take whatever value you assign to it, it expects a function handler however. When you assign to it functionName(), first the function is executed and whatever value it returns, its assigned as the handler. But, we want the handler to be the function we called. So instead of calling it, we want to refer to it, simply as functionName.

Ive created a more primitive solution of what you are trying to make. I only presented it as a boolean, so you have the chance to make the handler return a message instead, which is the case in your code.

const mobileWidth=550

function isMobile(){
  return window.innerWidth < mobileWidth
}

window.onresize=()=>console.log(isMobile())

function logIsMobile(){
   console.log(window.innerWidth < mobileWidth)
} 

window.onresize=logIsMobile

I created two handlers, to show you two different ways of achieving pretty much the same result. Both handlers will print whether the screen is mobile or not(true or false boolean). In the second case, logIsMobile logs the boolean comparison directly(the result of it to be precise). The first handler, isMobile, only returns a value, the boolean of question. To make it log that value, instead of attach isMobile directly as a handler, i declared an anonymous arrow function which is used as a handler and that functions logs value returned by isMobile(). Notice again, in window.onresize=()=>console.log(isMobile()), i dont execute the arrow function, but attach it as a handler. The function is executed on resize.

1 Like

Hey guys, so I revisited the task I was initially trying. I think I’ve suceeded. I wanted to assign the width and height of the browser window to a container div and all it’s children. Here’s my js…

// x = horizontal
// y = vertical

let browserWindowY = window.innerHeight;
let browserWindowX = window.innerWidth;

const container = document.querySelector('.wrapper');
const items = document.querySelectorAll('.item')

function assignWindowSize() {
    container.style.width = window.innerWidth + 'px';
    container.style.height = window.innerHeight + 'px';
    items.forEach(e => e.style.width = window.innerWidth + 'px');
    items.forEach(e => e.style.height = window.innerHeight + 'px');
}

window.onresize = assignWindowSize;

This was something I really wanted to achieve and I finally did it! Very grateful to you all for your help!

1 Like

i cant be sure, as i dont know your page functionality, or your intentions behind what you create, but wouldnt it be easier to handle this directly in css, by setting the elements with width: 100vw; height: 100vh. This would keep them sized with the screen.

1 Like

Yeah definitely easier in most cases, but I thought there might be good use cases potentially for being able to apply browser width/height moment by moment. For instance in positioning images pixel by pixel responsively although I need to learn how to manipulate values more with js before I can do that. I may never use it, but at least now I know it can be done, which is cool. It’s like media queries, but on steroids! Very stoked

Also there are some techniques that require fixed values, which is where this js may come in handy. Fixed values + responsiveness.

1 Like

of course, im sure the experience from designing those functions and handling event listeners will be of good use to you and you are sure to use something similar in the future.
On my last project i utilized several event listeners working with resize, where css could be of little help and i had to rely mostly on JS

1 Like