using a div class doesnt render html page

let x=[];
const json1 = '{"https://www.w3schools.com":"w3schools"}';
const obj1 = JSON.parse(json1);
ol = document.createElement('ol');
ser.appendChild(ol);
for (var key in obj1){
x= document.createElement('li');
x.innerHTML="<a href=" + key + ">" + obj1[key]+"</a>";
ol.appendChild(x);
}

.ser{
    color: red;
}

<div class="ser">welcome</div>

I have used a div class called ‘ser’ and I get a console error as ‘ser is not defined’
Note: but if I change to a div id and change the css value from .ser to #ser html page renders ok.
So I wish where I am conceptually going wrong in using the div class syntax.Please advise.

>Solution :

Define ser by classname:

var ser = document.querySelector('.ser')

or by id, since querySelector returns first match

var ser = document.getElementById('ser')