css media JS does not work for media style
Question
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mobile {display:none;}
.desktop {display:block;}
@media screen and (max-width : 320px) {
.mobile {display:block;}
.desktop {display:none;}
</style>
</head>
<body>
<div class="desktop">
<button onclick="myFunction()">calculate</button>
<p id=result></p>
</div>
<div class="mobile">
<button onclick="myFunction()">calculate</button>
<p id=result></p>
</div>
<script>
function myFunction() {
var x = 2;
var y = x + 3;
document.getElementById("result").innerHTML = y;
}
</script>
</body>
</html>
JS works only for desktops with screen width more 320 px. When browser s window is resized under 320 px, function does not work. Why?
3 answers
solution1
0 ACCPTED 2018-09-05 08:03:59
You are only outputting it with getElementById() . This function will only grab the first element of the DOM and update it. In the case of the smaller than 320 this element is hidden, so is your input.
I now have updated it so both <p> elements have a different id and updated them both in your myFunction() event handler. This way both are updated when you are emitting the click event.
function myFunction() { var x = 2; var y = x + 3; document.getElementById("result1").innerHTML = y; document.getElementById("result2").innerHTML = y; }
.mobile { display: none; } .desktop { display: block; } @media screen and (max-width: 320px) { .mobile { display: block; } .desktop { display: none; }
<div class="desktop"> <button onclick="myFunction()">calculate</button> <p id=result1></p> </div> <div class="mobile"> <button onclick="myFunction()">calculate</button> <p id=result2></p>
solution2
0 2018-09-05 08:08:30
I wont recommend this method, but still you can use this. event.target.nextElementSibling , this will always grab the next element to the element where the click is triggered. in your case it is all enough
function myFunction() { var x = 2; var y = x + 3; event.target.nextElementSibling.innerText = y; }
.mobile { display: none; } .desktop { display: block; } @media screen and (max-width: 320px) { .mobile { display: block; } .desktop { display: none; }
<div class="desktop"> <button onclick="myFunction()">calculate</button> <p></p> </div> <div class="mobile"> <button onclick="myFunction()">calculate</button> <p></p>
solution3
0 2018-09-05 08:28:44
Here is a solution which is much scalable.
Its better to replace the id's with class name (result) and use querySelectorAll to get all nodes with that class name. Then loop over the list and set the innerHTML.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .mobile {display:none;} .desktop {display:block;} @media screen and (max-width : 320px) { .mobile {display:block;} .desktop {display:none;} </style> </head> <body> <div class="desktop"> <button onclick="myFunction()">calculate</button> <p class=result></p> </div> <div class="mobile"> <button onclick="myFunction()">calculate</button> <p class=result></p> </div> <script> function myFunction() { var x = 2; var y = x + 3; document.querySelectorAll(".result").forEach(function(element){ element.innerHTML = y }); } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.