Почему не сменяется фон?

149
29 июля 2019, 22:00

Всем привет! Сначала были проблемы с фоном, но после множества попыток, я смог зафиксировать фон, чтобы он не сменялся после обновления или перехода с помощью localStorage, теперь же я не понимаю, почему по истечении времени ( пример 3сек) он не меняется.

Прошу подсказать, как исправить это? Думаю недописанно именно в localStorage, но не знаю как её подправить. Спасибо всем!

 window.onload = function() { 
            const date = new Date(); 
            const time = date.getHours() + ':' +addZero(date.getMinutes()); 
            document.getElementsByTagName('div') [1].innerHTML = time; 
            window.setTimeout(arguments.callee, 1000); 
            function addZero(num) { 
                var str = num.toString(); 
                return str.length == 1? "0" + str : str; 
            }; 
        } (); 
         
         
 function getRandomArbitrary(min, max) { 
            return  Math.floor(min + Math.random() * (max + 1 - min)) 
        } 
            let randomItem = getRandomArbitrary(0,36) 
                if(window.innerWidth = 1600) { 
            document.getElementsByClassName('p1')[randomItem].style.display="block"; 
} 
 
 
localStorage.setItem('name', 'conteiner'); 
document.getElementById('conteiner').innerHTML = localStorage.getItem('name'); 
localStorage.removeItem('name'); 
 
const phr = new Array(); 
phr.push("https://images.wallpaperscraft.ru/image/les_tuman_derevia_126479_1920x1080.jpg"); 
phr.push("https://images.wallpaperscraft.ru/image/gory_ozero_vershiny_vid_sverkhu_119133_1920x1080.jpg"); 
 
function Rotator_cont() { 
  const s = 3000; 
  const N = phr.length; 
  const i = Math.round(Math.random() * (N)); 
  Rotator(i); 
 
  function Rotator(i) { 
    i++; 
    if (i > N - 1) { 
      i = 0 
    }; //alert(i); 
    document.getElementById('conteiner').style.backgroundImage = 'url(' + phr[i] + ')'; 
    timerId01 = setTimeout(function() { 
      Rotator(i) 
    }, s); 
    return; 
  } 
} 
Rotator_cont()
#conteiner { 
   width: 100%; 
   height: 100%; 
   display: flex; 
   justify-content: center; 
   flex-direction: column; 
   align-items: center; 
 } 
  
 .mainTime { 
    display: flex; 
    margin-top: 110px; 
    font-size: 200px; 
    color:white; 
     
} 
.mainWord { 
    display: flex; 
    font-size: 50px; 
    position: absolute; 
    margin-top: 190px; 
    color:white; 
} 
 
.p1 { 
    display: none; 
}
<div id="conteiner"> 
  <div class="mainTime"></div> 
  <div class="mainWord"> 
    <div class="p1">Fortune favors the brave</div> 
  </div> 
</div>

Хорошо, люди указали на ошибку с #. Но теперь, в окне "conteiner", локал не работает, ошибка в консоли та же(Uncaught TypeError: Cannot set property 'innerHTML' of undefined), и фон сменяется по таймеру.

Поясню что я пытаюсь сделать: Вот есть Я(пользователь) я на странице , вижу фон (у него 5 мин таймер). Закрыл страницу. Через 3 мин. я захожу снова и вижу тот же фон. Снова закрыл. Но через 10 минут я зайду и фон уже сменился. Т.е. сохранить в local сам таймер + фон который был у пользователя.

Сам фон привязан к пустому div, думаю в этом и есть проблема ошибки.

Answer 1

Проблема находится в строке:

document.getElementById('#conteiner').innerHTML = localStorage.getItem('name');

Элемента с id #conteiner нет, поэтому при выполнении данной строки появлялась ошибка и далее выполнение кода просто не шло.

Для исправления можно просто убрать эту строку, либо убрать из селектора #, чтобы осталось просто .getElementById('conteiner'), как это уже есть в коде ниже:

document.getElementById('conteiner').style.backgroundImage
READ ALSO
Приложение TodoMVC

Приложение TodoMVC

Есть пример приложения TodoMVC с официального сайта VueJS

152
Значение термина pattern в React

Значение термина pattern в React

Помогите найти пожалуйста доступное определение термина pattern

105
Как ограничить вращение камеры TrackballControls в three.js

Как ограничить вращение камеры TrackballControls в three.js

Я использую вот такой код для ограничения вращения камеры

146