"uncaught Typeerror: Cannot Read Property 'style' Of Null At.. "

I practiced the styling as shown below in a different document and it worked there for paragraphs and buttons but, for divs, however, it refuses to do so. The first document.getEle

Solution 1:

Cannot read property 'style' of null this gives you great hint - of null. It does mean, it doesn't find element you are looking for.

It's simply because in html you are using classes <div class="red">

and ids in javascript document.getElementById('red')

Stick to classes:

document.getElementsByClassName('red')[0]

or convert to id

<div id="red">

Solution 2:

I think you need to add id to your div's

<div class="red"id="red" > some content</div>

document.getElementById('red').style.width="100px";

Solution 3:

Change (or add) "class='xxx'" to "id='xxx'", then you will be able to get the elements by the corresponding IDs. Otherwise you can try and use https://www.w3schools.com/jsreF/met_document_getelementsbyclassname.asp

Solution 4:

Select landing page element.

let landingPage = document.querySelector("landing-page");

Get Array Img.

let imgsArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]

Change Background Img Url.

landingPage.style.backgroundImage = 'imgs./imgaes/"2.jpg"'