JavaScript 中的 Window.matchMedia 不起作用

Question

I have an HTML, CSS and JavaScript files. The HTML contains three quotes which shuffles every two seconds. I have written the JavaScript code to show these quotes only when the screen width is at most 600px. The problem is that the quote continues to display across every screen width. I've tried using the media query in CSS, but to no avail. What might be the issue? Please, see code below.

HTML Code:

<div class="preNavBar">
        <div class="quoteWrapper">
            <span class="quote">The roots of education are bitter, but the fruit is sweet. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Aristotle</span>
        </div>
        <div class="quoteWrapper">
            <span class="quote">To teach is to learn twice. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Unknown</span>
        </div>
        <div class="quoteWrapper">
            <span class="quote">A person who won't read has no advantage over one who can't read. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Mark Twain</span>
        </div>
    </div>

CSS Code:

body {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16pxm;
    background: rgb(53, 54, 58);
}

* {
    box-sizing: border-box;
    /* margin: 0; */
    padding: 0;
}

/* PRE-NAVIGATION BAR */
.preNavBar {
    background-color: navy;
    color: white;
    padding: 10px 30px;
    display: grid;
    justify-content: center;
}

.preNavBar .quoteAuthor {
    font-weight: bolder;
    float: right;
}

@media only screen and (min-width: 768px) {
    /* .preNavBar .quoteWrapper{
        display: none;
    } */
}

JavaScript Code:

<script>
        let x = window.matchMedia("(max-width: 600px)");
        if (x.matches) {
            showQuote();
            function showQuote() {
                let slides = document.getElementsByClassName("quoteWrapper");
                let i;
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }

                let min = 0;
                let max = slides.length - 1;
                let randNum = Math.floor(Math.random() * (max - min + 1)) + min;

                slides[randNum].style.display = "block";

                setTimeout(showQuote, 2000); // change every 2 seconds
            }
        }
    </script>

Answer 1

Let's take a look at the very first line:

let x = window.matchMedia("(max-width: 800px)");

You invoke window.matchMedia and store returned value in x .

The important thing here is that x will not change if screen is resized after the moment it was declared.

If you want it to, you'll need a resize event listener .

Also, a possible pitfall here is that depending on where in the document your <script> tag is placed, you might want to wrap all your code into an IIFE to ensure it fires after the document is completely loaded.

Answer 2

That's because you set the variable on start and never change it on resize

let timeout;
function testMatch() {
    let x = window.matchMedia("(max-width: 800px)");
    if (x.matches) {
        function showQuote() {
            let slides = document.getElementsByClassName("quoteWrapper");

            for (let i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }

            //the min was 0 so it was useless, if you do slides.length-1, 
            //you wont be able to access the last index
            let randNum = Math.floor(Math.random() * slides.length);
            slides[randNum].style.display = "block";
            //set it so you can clear if user changes to > 600px
            timeout = setTimeout(showQuote, 2000); // change every 2 seconds
        }

        showQuote();
    } else if (timeout) {
        clearTimeout(timeout);
    }
}

testMatch();
addEventListener("resize", testMatch);

Also this could be a lot more efficiently done by using an id to signify which quote is not hidden.

(function () {
  const slides = document.getElementsByClassName("quoteWrapper");
  let timeout;

  function testMatch() {
    let x = window.matchMedia("(max-width: 800px)");
    if (x.matches) {
      function showQuote() {
        //the min was 0 so it was useless, if you do slides.length-1, 
        //you wont be able to access the last index
        let randNum = Math.floor(Math.random() * slides.length);

        const prev = document.getElementById("current-quote");
        if (prev) prev.removeAttribute("id");
        slides[randNum].setAttribute("id", "current-quote");
        timeout = setTimeout(showQuote, 2000); // change every 2 seconds
      }

      showQuote();
    } else if (timeout) {
      clearTimeout(timeout);
    }
  }

  testMatch();
  addEventListener("resize", testMatch);
})();

.quoteWrapper {
  display: none;
}

#current-quote {
  display: block;
}