Javascript window onload and onlick events


Hello guys I’m doing weather app project and I’ve run into an issue. Everything worked fine until I decided to make a function which would change Celsius to Fahrenheit and vice versa. I decided to make a function which I would call onclick event after window.load event, but for some reason it’s not working. When I use onclick element I get following error.

Uncaught TypeError: Cannot set property ‘onclick’ of null

and when I add to it window.load nothing happens. Here is my JS

// This won't work on github because openweatherapp requires payed version of api for https and github forces https

const ipApi = '';
const body = document.getElementsByTagName("body")[0];

    .then(response => response.json())
    .then(function(data) {
        let latitude =;
        let longitude = data.lon;
        let city =;

        const openWeatherAppId = 'daae173e6601ed118415b61db6a4003f';
        const openWeatherUrl = '' + latitude + '&lon=' + longitude + '&units=metric' + '&APPID=' + openWeatherAppId;

        fetchWeather(city, openWeatherUrl);
    .catch(function(error) {
        // If there is any error you will catch them here

function fetchWeather(city, api) {
        .then(response => response.json())
        .then(function(data) {

            let desc =[0].description;
            let temperature = data.main.temp;
            let icon =[0].icon;
            var iconSrc = '' + icon + '.png';

            let myCity = createNode('h2');
            myCity.innerHTML = city;
            let myDesc = createNode('p');
            myDesc.innerHTML = desc;

            let myDiv = createNode('div');
            myDiv.setAttribute('id', 'temperatureDiv');

            let myTemp = createNode('p');
            myTemp.innerHTML = temperature;
            myTemp.setAttribute('id', 'temperature'); // Give ID to 'p' so I can use with DOM

            let myUnit = createNode('span');
            myUnit.innerHTML = 'Celsius';
            myUnit.setAttribute('id', 'unit'); // Give ID to 'p' so I can use with DOM

            let myIcon = createNode('img');
            myIcon.src = iconSrc;

            append(body, myCity);
            append(body, myDesc);
            append(body, myDiv);
            append(myDiv, myTemp);
            append(myDiv, myUnit);
            append(body, myIcon);
        .catch(function(error) {
            // If there is any error you will catch them here

function changeUnits (myTemperature) {
    let currentTemp = myTemperature; // This is current temperature in celsius

    if (document.getElementById('unit').innerHTML == 'Celsius') {
        document.getElementById('temperature').innerHTML = (currentTemp * 1.8 + 32).toFixed(0);
        document.getElementById('unit').innerHTML = 'Fahrenheit';
    } else {
        document.getElementById('temperature').innerHTML = currentTemp;
        document.getElementById('unit').innerHTML = 'Celsius';

    document.getElementById('unit').onclick = changeUnits;

function createNode(element) {
    return document.createElement(element); // Create the type of element you pass in the parameters

function append(parent, el) {
    return parent.appendChild(el); // Append the second parameter(element) to the first one

Can anyone help me with this. Here is JSBin, so you see what is happening,js,console,output
I’m using openweather API so use http, so you can see code in action it won’t work on https


I found the problem I was trying to get element before it even existed. I just assigned onclick handler on creation.
myUnit.addEventListener('click', function(e) { changeUnits()})