Блог

Главная - Вопросы по программированию - Как правильно использовать переменную в функциях обработчика событий в javascript

Как правильно использовать переменную в функциях обработчика событий в javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я должен изменить размер элементов div с помощью javascript. У меня есть этот код —

 <!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>

Скрипты здесь работают корректно, Но при использовании переменной displaysize в операторе if функция не работает.
Итак, в чем проблема с этим кодом.

Редактировать

Даже это не работает, когда функция называется как function resizer(), а затем вызывается событие

Комментарии:

1. Оператор if не будет работать с displaysize, потому что, поскольку displaysize создается перед функцией onresize, он никогда не будет создан повторно. Она всегда будет иметь одно и то же значение, проверьте эту скрипку, чтобы лучше определить : jsfiddle.net/javtdyfe

2. @abvlle но это также не работает после присвоения функции имени типа resizer(), пожалуйста, объясните

Ответ №1:

Проблема в вашем коде в том, что, как сказал @abvlee, ваше displaysize значение было удалено из обработчика событий. Тогда значение не будет изменено при вызове функции. Переместите ее внутрь обработчика, и вы увидите, как это работает.

 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>

Ответ №2:

displaysize Переменной не присваивается новое значение window при изменении размера окна, поскольку оно выходит за рамки функции.

Решение 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>

Хотя это устраняет проблему с displaysize выходом за рамки, это не совсем то, что вы просили, поэтому у меня есть следующее решение.

Решение 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>

Это решение — то, о чем вы просили, displaysize определяется вне функции, затем ей присваивается новое значение при изменении размера окна. срабатывает.

Но подождите, это еще не все!

Вы могли бы просто использовать медиа-запрос в вашем css вместо использования javascript.

 .column {
  display: block;
}

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

Это лучшее решение, которое не зависит от javascript!