why is this code not working in soloLearn's app?

Question

it works in desktop and browser version. but for me it's not working in mobile app! it shows an error and it doesn't show the buttons
https://code.sololearn.com/Wa0A109a25a0/?ref=app

Answer 1

It works for me in iOS. Does this code work for you?
https://code.sololearn.com/Wi4pp66Ok99F/?ref=app

If not, copy the error message here.

Answer 2

salar vahidi
That is because your Javascript code was loading before the DOM of the page. So when you pass document.body to getComputedStyle(), you are actually passing null because document.body does not exist by then.

What I did was I wrapped the Javascript code in a function and assigned the function to window.onload. When the DOM of the page loads, the "load" event is triggered and the window.onload method is called. This way, we are ensuring that the Javascript code is executed only after the page is fully loaded

Answer 3

XXX oh I get now. and what you said about loading order makes sense since the code got fixed after adding window.onload
but I think SoloLearn loads JS after HTML and CSS and if it does that, document.body must exist before JS loads. in that case shouldn't this work fine? especially that it worked fine on SL's desktop version. and that's another issue. I wonder why desktop browser and mobile app versions differ in the output! both in functionality and the looks. for example the buttons in your code moved to right below. I edited mine a little bit on browser version but now the buttons are out of reach on mobile version, though it works fine on desktop browser! what I think is that the app have bugs

https://code.sololearn.com/W1A6A7a10a22/?ref=app

Answer 4

salar vahidi
No the JS does not load after HTML and CSS. The JS is simply enclosed in a "script" tag and inserted into the HTML code. The problem is that the script tag is inserted inside the "head" tag, and because the "body" tag is not reached yet, the JS is loaded before the page is fully loaded.

As for the positioning of the buttons, there is no problem with the app. It is a very common problem in web designing. All devices have different screen sizes and for that reason, if the positioning of elements is fine one a device, it might be off in another device. For this reason, "responsive web design" is a big subject. There is a course about it on SoloLearn too
https://www.sololearn.com/Course/Responsive-Web-Design/?ref=app

Answer 5

XXX yes it worked. you added a function that I'm not yet familiar with but it fixed it. thank you so much
in my original code the error was saying it cannot read property 'fontSize' of null.

Answer 6

XXX I have actually made it responsive with some simple codes and it works fine on chrome devTools toggle device and firefox's responsive design mode that are used to see the final results on different ratios and different devices like mobile. and in desktop you can resize the output section to see it in different sizes. I have also written it on codepen. look at this with mobile browser: https://codepen.io/Salarr96/full/ZEeexPR
you can see here that positioning of buttons are right as expected(unlike in output of soloLearn's mobile app)

and about the scripts loading order you are right about how it works on app but I still don't get why it worked on desktop version without any problem. maybe the two versions are different?!
I still think there's sth wrong with SL's mobile app version of HTML/CSS/Javascript. or maybe it works differently than desktop version but overall its mobile app is not a good representative of what in reality your web codes would look like