Responsive JavaScript with text replacing

Question

I want to replace a text depending on the screen size ( max-width:700px ). I want to use JavaScript to replace and if/else for the screen size.

Here is my code:

 .membre5 { display: inline-block; position: relative; top: 15px; margin: 0 auto; justify-content: space-between; max-width: 50vw; box-sizing: border-box; align-items: center; text-align: center; /* transform: translateX(50%); */ padding-bottom: 150px; } .card { margin-left: auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); max-width: 300px; max-height: 540px; text-align: center; background-color: grey; } img.skin { max-width: 300px; max-height: auto; } .title { color: rgb(210, 210, 210); font-size: 18px; } .nom { font-size: 2.5vw; color: inherit; color: white; } button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; font-size: 18px; } a { text-decoration: none; } button:hover, a:hover { opacity: 0.7; } .card { font-family: odin rounded; font-size: 120%; } 

 <div class="membre5"> <div class="card"> <img class="skin" src="https://cdn1.imggmi.com/uploads/2018/7/19/82b5f414cf833e05e6dd86cef344a52f-full.png" alt="ALLiAnce" style="width:100%"> <h1 class="nom">ALLiAnce</h1> <p class="title" id="comp">Admin et remplaçant</p> <script> function myFunction(x) { if (x.matches) { // If media query matches function test() { var str = document.getElementById("comp").innerHTML; var res = str.replace("Admin et remplaçant", "Membre"); document.getElementById("comp").innerHTML = res; } } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) // Call listener function at run time x.addListener(myFunction) // Attach listener function on state changes </script> <p><button>Contact</button></p> </div> </div> 

So the text that I want to be changed: "Admin et remplaçant" to "Membre" , but the script doesn't work, I don't know why (I take the script from many websites and put all-in-one). Can you say what is wrong, please?

Thank you.

Answer 1

This will work. On load, call the function to check the max-width and add a listener to resize event. The following makes the text to change if the width exceeds or lesser than the max-width .

Using listeners of MediaQueryList , MediaQueryList.addListener()

 var mql = window.matchMedia("(max-width: 200px)"); function matches() { var elem = document.getElementById("comp"); elem.innerHTML = mql.matches ? "Membre" : "Admin et remplaçant"; } mql.addListener(matches); 

 <p class="title" id="comp">Admin et remplaçant</p> 

MediaQueryList.onchange

 var mql = window.matchMedia("(max-width: 200px)"); function matches() { var elem = document.getElementById("comp"); elem.innerHTML = mql.matches ? "Membre" : "Admin et remplaçant"; } mql.onchange = matches; 

 <p class="title" id="comp">Admin et remplaçant</p> 

Using window.onresize ,

 function matches() { var elem = document.getElementById("comp"); elem.innerHTML = window.matchMedia("(max-width: 200px)").matches ? "Membre" : "Admin et remplaçant"; } window.onresize = function(event) { matches(); }; matches(); 

 <p class="title" id="comp">Admin et remplaçant</p> 

Answer 2

It looks like you're just not calling your test function after you declare it to me

function myFunction(x) {
    if (x.matches) { // If media query matches
        function test() {
            var str = document.getElementById("comp").innerHTML; 
            var res = str.replace("Admin et remplaçant", "Membre");
            document.getElementById("comp").innerHTML = res;
        }
        //CALL TEST FUNCTION
        test();
    } 
}