Home>

javascript : Console gives error "Uncaught TypeError: Cannot read properties of null (reading 'style')" [duplicate]

#photo {
  height: 750px;
}
<div id="photo" style="background-image:url('https://mimigram.ru/wp-content/uploads/2020/07/%D0%A7%D1%82%D0%BE-%D1% 82%D0%B0%D0%BA%D0%BE%D0%B5-%D1%84%D0%BE%D1%82%D0%BE.jpeg');"> </div><script>  var photo= document.getElementById('photo')
  photo.style.backgroundImage= `url('https://s0.rbk.ru/v6_top_pics/media/img/5/46/756038770746465.jpg')`;
</script>

Click the "Run Code" button. Where is the mistake?

Igor2022-02-03 18:28:53
javascript html css
  • Answer # 1

    You have

    #photo {
  height: 750px;
}
    <script>  var photo= document.getElementById('photo')
  photo.style.backgroundImage= `url('https://s0.rbk.ru/v6_top_pics/media/img/5/46/756038770746465.jpg')`;
</script><div id="photo" style="background-image:url('https://mimigram.ru/wp-content/uploads/2020/07/%D0%A7%D1%82%D0%BE-%D1% 82%D0%B0%D0%BA%D0%BE%D0%B5-%D1%84%D0%BE%D1%82%D0%BE.jpeg');"> </div>

    Need

    #photo {
  height: 750px;
}
    <script>  window.addEventListener('load', ()=> {
    var photo= document.getElementById('photo')
    photo.style.backgroundImage= `url('https://s0.rbk.ru/v6_top_pics/media/img/5/46/756038770746465.jpg')`;
  });
</script><div id="photo" style="background-image:url('https://mimigram.ru/wp-content/uploads/2020/07/%D0%A7%D1%82%D0%BE-%D1% 82%D0%B0%D0%BA%D0%BE%D0%B5-%D1%84%D0%BE%D1%82%D0%BE.jpeg');"> </div>

    And you can lower the script under the markup

    Не быть рабом на Руси2022-02-03 20:46:12
  • Answer # 2

    You have

    #photo {
  height: 750px;
}
    <script>  var photo= document.getElementById('photo')
  photo.style.backgroundImage= `url('https://s0.rbk.ru/v6_top_pics/media/img/5/46/756038770746465.jpg')`;
</script><div id="photo" style="background-image:url('https://mimigram.ru/wp-content/uploads/2020/07/%D0%A7%D1%82%D0%BE-%D1% 82%D0%B0%D0%BA%D0%BE%D0%B5-%D1%84%D0%BE%D1%82%D0%BE.jpeg');"> </div>

    Need

    #photo {
  height: 750px;
}
    <script>  window.addEventListener('load', ()=> {
    var photo= document.getElementById('photo')
    photo.style.backgroundImage= `url('https://s0.rbk.ru/v6_top_pics/media/img/5/46/756038770746465.jpg')`;
  });
</script><div id="photo" style="background-image:url('https://mimigram.ru/wp-content/uploads/2020/07/%D0%A7%D1%82%D0%BE-%D1% 82%D0%B0%D0%BA%D0%BE%D0%B5-%D1%84%D0%BE%D1%82%D0%BE.jpeg');"> </div>

    And you can lower the script under the markup

    Не быть рабом на Руси2022-02-03 20:46:12