"Implementing class changes based on screen size using javascript is not functioning as expected

Question

"Implementing class changes based on screen size using javascript is not functioning as expected

var d = document.getElementById('promo5');

var viewportWidth = window.innerWidth;


function mobileViewUpdate() {

    if (viewportWidth <= 700) {
        d.className += (" .promo5-mobile");
    } else if (viewportWidth >= 700) {
        d.className += ("");
    }
}


window.onload = mobileViewUpdate();
window.onresize = mobileViewUpdate();

Add a class to the div below:

<div id="promo5" class="promo5">

This will enable it to display on the mobile version of my website.

.promo5-mobile {
    display: none;
}

I am facing an issue where the class is not being added, even though it works when I run it in my browser console. I have verified that my JavaScript file is functioning correctly. As a beginner, I suspect it may be something simple that I am missing.

UPDATE: I corrected the improperly worded if statement to else if, moved the viewportWidth variable inside the function, and checked with the browser inspector, yet the class is still not being added. If no solution is found, I plan to resort to using media queries instead.

javascript

Answer 1

Answer №1

Alright, there are several errors that need fixing:

Make sure to move
```
var viewportWidth = window.innerWidth;
```
inside the mobileViewUpdate function to ensure its value is updated whenever needed.
When calling the function on resize, use
```
window.onresize = mobileViewUpdate
```
without brackets.
Correct the condition statement - remove brackets after else.
Avoid adding promo5-mobile to the className every time you resize a small window; also remember to remove this class when resizing back to medium or large.

Here is how it should be fixed:

var d = document.getElementById('promo5');

function mobileViewUpdate() {
    var viewportWidth = window.innerWidth;
    if ( viewportWidth <= 700 ) {
        if ( d.className.indexOf(" promo5-mobile") === -1 ) {
            d.className += (" promo5-mobile");
        }
    } else {
        if ( d.className.indexOf(" promo5-mobile") > -1 ) {
            d.className = d.className.replace(" promo5-mobile", "");
        }
    }
}

window.onload = mobileViewUpdate;
window.onresize = mobileViewUpdate;

Answer 2

Alright, there are several errors that need fixing:

Make sure to move
```
var viewportWidth = window.innerWidth;
```
inside the mobileViewUpdate function to ensure its value is updated whenever needed.
When calling the function on resize, use
```
window.onresize = mobileViewUpdate
```
without brackets.
Correct the condition statement - remove brackets after else.
Avoid adding promo5-mobile to the className every time you resize a small window; also remember to remove this class when resizing back to medium or large.

Here is how it should be fixed:

var d = document.getElementById('promo5');

function mobileViewUpdate() {
    var viewportWidth = window.innerWidth;
    if ( viewportWidth <= 700 ) {
        if ( d.className.indexOf(" promo5-mobile") === -1 ) {
            d.className += (" promo5-mobile");
        }
    } else {
        if ( d.className.indexOf(" promo5-mobile") > -1 ) {
            d.className = d.className.replace(" promo5-mobile", "");
        }
    }
}

window.onload = mobileViewUpdate;
window.onresize = mobileViewUpdate;

Answer 3

Answer №2

The reason it's not functioning correctly is due to an error in your if/else statement. Instead of using else, consider using else if, or you can simply use the else statement without specifying (viewportWidth >= 700). Please refer to the updated code below:

Revision 1: Implement the classlist method instead of className to enable your JavaScript to add a class. Refer to the following snippet:

function mobileViewUpdate() {
    if (viewportWidth <= 700) {
        d.classList.add("promo5-mobile");
    } else {
        d.classList.remove("promo5-mobile");
    }
}

Answer 4

The reason it's not functioning correctly is due to an error in your if/else statement. Instead of using else, consider using else if, or you can simply use the else statement without specifying (viewportWidth >= 700). Please refer to the updated code below:

Revision 1: Implement the classlist method instead of className to enable your JavaScript to add a class. Refer to the following snippet:

function mobileViewUpdate() {
    if (viewportWidth <= 700) {
        d.classList.add("promo5-mobile");
    } else {
        d.classList.remove("promo5-mobile");
    }
}

Answer 5

Answer №3

Make sure to include a space instead of a dot in the class name. For example, if you are using .promo5-mobile in your CSS file, your JavaScript code should be

d.className += (" promo5-mobile");

, without the dot.

Note: It's important to note that as mentioned by Nikolay, the variable viewportWidth is only being set on page load. If the function is called on window resize, make sure to update the viewportWidth to reflect the current width for accurate results.

Additional Tip: Consider utilizing CSS @media queries to hide elements based on screen size rather than solely relying on JavaScript. Here's an example of how you can do it in your main CSS file:

#promo5 {
  display: none;
}

@media (min-width: 700px) {
  #promo5 {
    display: block;
  }
}

Answer 6

Make sure to include a space instead of a dot in the class name. For example, if you are using .promo5-mobile in your CSS file, your JavaScript code should be

d.className += (" promo5-mobile");

, without the dot.

Note: It's important to note that as mentioned by Nikolay, the variable viewportWidth is only being set on page load. If the function is called on window resize, make sure to update the viewportWidth to reflect the current width for accurate results.

Additional Tip: Consider utilizing CSS @media queries to hide elements based on screen size rather than solely relying on JavaScript. Here's an example of how you can do it in your main CSS file:

#promo5 {
  display: none;
}

@media (min-width: 700px) {
  #promo5 {
    display: block;
  }
}

"Implementing class changes based on screen size using javascript is not functioning as expected

Answer №1

Answer №2

Answer №3

Similar questions

Arranging DataTable by the newest date

JavaScript: Transform a JSON string post-callback into a plain JavaScript array

Unable to submit any data through the form in Sails.js

The jQuery validation code is functioning properly, yet it is resulting in the same files being uploaded to both separate folders

Issue with Chrome on android causing local website javascript and css to not load properly

implementing a calendar picker within a linked select dropdown using ajax

The format for establishing an array with a specific key

Utilizing a factory as the data source in angular-datatables leads to unexpected errors

Discover the ultimate guide to maintaining individual premium memberships in a Next.js application using the powerful combination of Redux, Firebase, and Stripe. Never worry about users losing their premium status again after

Tips for preventing tiny separation lines from appearing above and below unordered list elements

Is there a way to determine if any word within a given text is present in an array?

Is it possible to create a "private" variable by utilizing prototype in JavaScript?

The function "Jest spyOn" does not exist

The php code managed to infect my website

Obtain data from ng-model in AngularJS $scope

What is the best way to convert a string to an object?

Error loading the app.html file

Creating a custom scrollbar within a div using CSS and JavaScript

Python on the server side generating a downloadable zip file

What do you think of the unique JSON syntax found in the React-Redux-Firebase documentation? Valid or not?