Javascript window onload and onlick events

1

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 = 'http://ip-api.com/json';
const body = document.getElementsByTagName("body")[0];

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

        const openWeatherAppId = 'daae173e6601ed118415b61db6a4003f';
        const openWeatherUrl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric' + '&APPID=' + openWeatherAppId;

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


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

            let desc = data.weather[0].description;
            let temperature = data.main.temp;
            let icon = data.weather[0].icon;
            var iconSrc = 'http://openweathermap.org/img/w/' + 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);
             
            changeUnits(temperature);
        })
        .catch(function(error) {
            // If there is any error you will catch them here
            console.log(error);
        });    
}

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 Bin - Collaborative JavaScript Debugging
I’m using openweather API so use http, so you can see code in action it won’t work on https

2

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()})