Same page with multiple matchMedia queries - newbie question

Hello everyone,

I’d be very happy if someone could please help me out. I’m learning website design and JavaScript is presenting a few difficulties.

I have the following code on my webpage:

<script type="text/javascript">
if (matchMedia) {
        var mquery = window.matchMedia("(max-width:601px )");
        mquery.addListener(widthChange);
        widthChange(mquery);
}
function widthChange(mquery) {
        if (mquery.matches) {
document.getElementById;

        }
        else {
document.getElementById;

        }
}
</script>

<script type="text/javascript">
if (matchMedia) {
        var mq = window.matchMedia("(max-width:484px )");
        mq.addListener(WidthChange);
        WidthChange(mq);
}
function WidthChange(mq) {
        if (mq.matches) {document.getElementById;

        }
        else {document.getElementById;

        }
}
</script>

The scripts work when the if else statements are between their own opening/closing <script> tags (as per the above code), but not if I add them all to single opening/closing <script> tags. I wanted to move most of my JavaScript to an external file, so this is a bit of a dilemma. Only the first if (matchMedia) statement appears to work when I add both statements to an external JavaScript file.

What am I missing?

Thanks in advance!!!

I’ve removed unnecessary code after document.getElementById because it has no bearing with regards to the problem at hand.

Perhaps there’s something that I’m not quite understanding in your explanation.
Can you please show us what you attempted which didn’t work?

Hi Paul,

thank you for your reply.

I’m trying to design a responsive website, and I have 2 matchmedia if statements on my webpage. When I move these scripts to an external JavaScript file only the first if (matchMedia) statement will work.

Only the first if (matchMedia) statement will work in the following code:

<script type=“text/javascript”>
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:601px )”);
mquery.addListener(widthChange);
widthChange(mquery);
}
function widthChange(mquery) {
if (mquery.matches) {
document.getElementById;

}
else {
document.getElementById;

}
}

if (matchMedia) {
var mq = window.matchMedia(“(max-width:484px )”);
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {document.getElementById;

}
else {document.getElementById;

}
}
</script>

Is this because the first statement interferes with the second statement? Do I need to “close” or keep the statements separate from one another?

Thank you!

You may want to give the functions different names in this situation.

Hi Paul,

sorry for the late reply!

I already have different names for the functions. Have I written the if (matchMedia) statements in the correct manner? How else would I code these scripts?

If anyone knows.

Thank you

What are you wanting them to do? Currently it seems that nothing is being done regardless of whether things match or not.

Hi Paul,

thanks for getting back to me.

I have two separate events that occur when the window is minimized. At a max-width of 601px I need to display something; above 601px it is hidden. The same goes for when the window has a max-width of 484px.

The scripts work fine when they are separated:

<script type=“text/javascript”>
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:601px )”);
mquery.addListener(widthChange);
widthChange(mquery);
}
function widthChange(mquery) {
if (mquery.matches) {
document.getElementById(‘foo’).style.display=‘block’;
}
else {
document.getElementById(‘foo’).style.display=‘none’;
}
}

</script>

<script type=“text/javascript”>
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:484px )”);
mquery.addListener(WidthChange);
WidthChange(mquery);
}
function WidthChange(mquery) {
if (mquery.matches) {
document.getElementById(‘bar’).style.display=‘block’;
}
else {
document.getElementById(‘bar’).style.display=‘none’;
}
}
</script>

They no longer work when they follow one another in an external JavaScript file.
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:601px )”);

// rest of code here

}
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:484px )”);

// rest of code here

}

Then only the first script will work.

Yes, that would seem to be because you have two functions with the same name being defined.

Try naming them something different, or using just the one function and pass as a parameter the element that you want them to work with.

Am I not already using different function names?

The first script has width with a small letter.
mquery.addListener(widthChange);

The second script:
mquery.addListener(WidthChange);

Oh boy, yes - no wonder is was missed. Capital first letters of functions should be reserved only for object constructor functions.

Hi Paul,

thank you for your assistance.

I have tried other function names but they haven’t made any difference.

For the time being, I’m going to include one of the scripts in my webpage <head> and the other one in my external JavaScript file, until I find another solution.

There are plenty of other problems that require my attention!

Thanks again

Cheers