change src of img with js

Question

Using following code the src of image changes only between "width-1.gif" and "width-2.gif". How to fix this code to give the src also value of "width-3.gif" and "width-4.gif" when window width has resized?

var img = document.getElementById('img');

var changeSize = function () {
    if (document.documentElement.clientWidth >= 993) {
        img.setAttribute('src', 'images/width-1.gif')
    } else if (document.documentElement.clientWidth <= 992 || document.documentElement.clientWidth >= 871) {
        img.setAttribute('src', 'images/width-2.gif')
    } else if (document.documentElement.clientWidth <= 870 || document.documentElement.clientWidth >= 786) {
        img.setAttribute('src', 'images/width-3.gif')
    } else if (document.documentElement.clientWidth <= 785) {
        img.setAttribute('src', 'images/width-4.gif')
    }
};

window.addEventListener("resize", changeSize);

Answer 1

Use && instead of ||

var changeSize = function () {
    if (document.documentElement.clientWidth >= 993) {
        img.setAttribute('src', 'images/width-1.gif')
    } else if (document.documentElement.clientWidth <= 992 && document.documentElement.clientWidth >= 871) {
        img.setAttribute('src', 'images/width-2.gif')
    } else if (document.documentElement.clientWidth <= 870 && document.documentElement.clientWidth >= 786) {
        img.setAttribute('src', 'images/width-3.gif')
    } else if (document.documentElement.clientWidth <= 785) {
        img.setAttribute('src', 'images/width-4.gif')
    }
};

Answer 2

You need to change your ORs (||) to ANDs (&&). In the example above, any value below 992 will be satisfied by the first condition document.documentElement.clientWidth <= 992 and the expression will automatically return true. Try the below instead:

var changeSize = function () {
if (document.documentElement.clientWidth >= 993) {
    img.setAttribute('src', 'images/width-1.gif')
} else if (document.documentElement.clientWidth <= 992 &&     document.documentElement.clientWidth >= 871) {
    img.setAttribute('src', 'images/width-2.gif')
} else if (document.documentElement.clientWidth <= 870 && document.documentElement.clientWidth >= 786) {
    img.setAttribute('src', 'images/width-3.gif')
} else if (document.documentElement.clientWidth <= 785) {
    img.setAttribute('src', 'images/width-4.gif')
}

};

Answer 3

Your second if statement checks if width<=922 OR width>=871 which is always true for any number. It can be easily fixed by using && , or, you can just take advantage of nested for loops:

var changeSize = function () {
    if (document.documentElement.clientWidth >= 993) {
        img.setAttribute('src', 'images/width-1.gif')
    } else if (document.documentElement.clientWidth >= 871) {
        img.setAttribute('src', 'images/width-2.gif')
    } else if (document.documentElement.clientWidth >= 786) {
        img.setAttribute('src', 'images/width-3.gif')
    } else {
        img.setAttribute('src', 'images/width-4.gif')
    }
};