How to correctly use a variable in Event Handler functions in javascript

Question

I have to resize div elements using javascript . I have this code -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home page</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="bootstrapCSS/bootstrap.css">
</head>

<body>
    <div class="container">
        <div id="column1" class="column">left</div>
        <div id="column2" class="column">middle</div>
        <div id="column3" class="column">right</div>
        <script>
            var columns = document.getElementsByClassName("column");
            var displaysize = window.innerWidth;

            window.onresize = function () {
                for (const column of columns) {
                    if (window.innerWidth < 560) {
                        column.style.display = "block";
                    }
                    else {
                        column.style.display = "inline-block";
                    }
                }
            }
        </script>
    </div>
</body>

</html>

Scripts here are working correctly, But when using displaysize variable in the if statement the function is not working. So, what is the problem with this code.

Edit

Even this is not working when function is named like function resizer(),then calling on the event

The if statement won't work with displaysize because since displaysize is instanciate before the onresize func, it will never be re-instanciate. It will always have the same value, check this fiddle to better undestand : jsfiddle.net/javtdyfe — abvlle
– abvlle, Commented Mar 29, 2019 at 11:21
@abvlle but this is also not working after naming the function like resizer(), please explain — sikka karma
– sikka karma, Commented Mar 29, 2019 at 11:30

reisdev · Accepted Answer · 2019-03-29 11:38:34Z

The problem in your code is that, as @abvlee said, your displaysize value was instanciate out of the event handler. Then, the value won't be changed when the function is called. Move it to inside the handler and you'll see it work.

var columns = document.getElementsByClassName("column");

window.onresize = function() {
    var displaysize = window.innerWidth;
    for (const column of columns) {
    
       if (displaysize < 560) {
          column.style.display = "block";
       } else {
          column.style.display = "inline-block";
       }
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>home page</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="bootstrapCSS/bootstrap.css">
</head>

<body>
  <div class="container">
    <div id="column1" class="column">left</div>
    <div id="column2" class="column">middle</div>
    <div id="column3" class="column">right</div>
  </div>
</body>

</html>

BarryScott · Accepted Answer · 2019-03-29 12:17:15Z

The displaysize variable is not being reassigned the new window value on window resize because it is outside the scope of the function.

Solution 1

<script>
  var columns = document.getElementsByClassName('column');
  var columnArrayLength = columns.length;

  window.addEventListener('resize', function() {
    var displaysize = window.innerWidth;

    for (var i = 0; i < columnArrayLength; i++) {
      if (displaysize < 560) {
        column.style.display = "block";
      } else {
        column.style.display = "inline-block";
      }
    }
  });
</script>

While this fixes the problem of the displaysize being out of scope it isn't quite what you asked so I have the next solution.

Solution 2

<script>
  var columns = document.getElementsByClassName('column');
  var displaysize = window.innerWidth;
  var columnArrayLength = columns.length;

  window.addEventListener('resize', function() {
    displaysize = window.innerWidth;

    for (var i = 0; i < columnArrayLength; i++) {
      if (displaysize < 560) {
        column.style.display = "block";
      } else {
        column.style.display = "inline-block";
      }
    }
  });
</script>

This solution is what you asked for, displaysize is defined outside of the function then a new value is reassigned to it when the window resize fires.

But wait there's more!

You could just use a media query in your css instead of using javascript.

.column {
  display: block;
}

@media(min-width: 560px) {
  .column {
    display: inline-block;
  }
}

This is the best solution and doesn't rely on javascript!

Collectives™ on Stack Overflow

How to correctly use a variable in Event Handler functions in javascript

2 Answers 2

Comments

Solution 1

Solution 2

But wait there's more!

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Solution 1

Solution 2

But wait there's more!

Comments

Your Answer

Sign up or log in

Post as a guest

Related