Comparison Operator required in loop?

JavaScript
1

Hi, I would like to know whether I need a comparison operator in the loop. As I want the script to feed the same image with an id of img_a to both a 320px width and a 568px width ?

var mqls = [
            window.matchMedia("(min-width: 320px)") || window.matchMedia("(min-width:568px)"),
            window.matchMedia("(min-width: 568px)"),
            window.matchMedia("(min-width: 80em)")
        ]
        function mediaqueryresponse(mql){
          if (mqls[0].matches){ 
            document.getElementById("img_a").src = "http://blog.wppionline.com/wp-content/uploads/2014/01/Rock-Camera-2.jpg";
          }
          if (mqls[1].matches){
            document.getElementById("img_b").src = "http://www.gardenclassics.co.nz/img/product/rock-long-rock-large.gif";
          }
          if (mqls[2].matches){
            document.getElementById("1").src = "http://placehold.it/400x300/000000/eeeeee?text=Large";  
          }
        }
        for (var i=0; i<mqls.length; i++){
            mediaqueryresponse(mqls[i])
            mqls[i].addListener(mediaqueryresponse)
        }
2

I can’t see why you are using a loop for this in the first place.

A single event listener should be sufficient and then perform the rest of the necessary processing inside the function that listener runs.

3

Are you saying just keep the loop within the function followed by the for loop ?

Sorry I’m still rusty with JS :smile:

4

No. To do what you want doesn’t need a loop at all. Just a single event listener calling a function that does the rest.

5

If I’m understanding you correctly; remove the last loop but keep; mediaqueryresponse(mql).addListener ?
If correct, I did just that but the image isn’t loading any longer ?

As well, if I want the first the first image in the array [0] to show on a 320px & 568px width, I’m asking before doing as I suspect a comparison operator could be placed in the array ?

6

Could someone please tell me whether or not a comparison operator is required to display the same image on two different view port widths ?

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.