Comparison Operator required in loop?

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 = "";
          if (mqls[1].matches){
            document.getElementById("img_b").src = "";
          if (mqls[2].matches){
            document.getElementById("1").src = "";  
        for (var i=0; i<mqls.length; i++){

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.

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

Sorry I’m still rusty with JS :smile:

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.

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 ?

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

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