Значение изменения блока переменной при обновлении страницы в javascript

Question

У меня есть 2 переменные имени first и last. Когда размер окна меньше 768 пикселей, я хочу first = 1 и last = 5. И когда размер окна больше 768 пикселей, first = 1 и last = 3. Вот мой код.

var first = 1; 
var last = 5; 
window.onresize = function(){ 
    var w = window.innerWidth 
      || document.documentElement.clientWidth 
      || document.getElementsByTagName('body')[0].clientWidth; 

    if (w <= 768){ 
     first = 1; 
     last = 3; 
    } 

    if (w > 768){ 
     first = 1; 
     last = 5; 
    } 
} 

Работает. Но когда размер окна составляет 600 пикселей (меньше 768 пикселей), я нажимаю F5 (обновление), первая переменная = 1 и последняя = 5 (эти значения изменяются). Я хочу, когда я нажимаю F5, если окно меньше 768 пикселей, его все еще 1 и 3. Что мне теперь делать? Помоги мне. Благодарю.

Answer 1

Так оно и должно быть.

Итак, теперь у нас есть одна функция, которая задает переменные по ширине окна. мы будем называть его два раза

1. При загрузке страницы, вы должны установить переменные (первый, последний), а за размер окна снова

2. Когда страница изменяется, вы должны установить переменные ,

   var first = 1; 
   var last = 5; 
   
   function setVariables() 
   { 
   var w = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.getElementsByTagName('body')[0].clientWidth; 
   
   if (w <= 768){ 
       first = 1; 
       last = 3; 
   } 
   
   if (w > 768){ 
       first = 1; 
       last = 5; 
   } 
   } 
   
   window.onresize = function(){ 
   setVariables(); 
   } 
   
   setVariables(); 
   

Answer 2

Просто переместите функцию в отдельную функцию и использовать его на странице загрузки:

function checkWidth(){ 
    var w = window.innerWidth 
      || document.documentElement.clientWidth 
      || document.getElementsByTagName('body')[0].clientWidth; 

    if (w <= 768){ 
     first = 1; 
     last = 3; 
    } 

    if (w > 768){ 
     first = 1; 
     last = 5; 
    } 
} 

... 

var first = 1; 
var last = 5; 
window.onresize = checkWidth; 
window.onload = checkWidth;