How to make 'click' event work under a div

Question

var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var unit = "C";
var currentTempInCelcius;

$(document).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = "lat=" + position.coords.latitude;
            var lon = "lon=" + position.coords.longitude;
            getWeather(lat, lon);
        });
    } else {
        window.alert("Geolocation is not supported by this browser.");
    }

    $('#unit').click(function () {
        var currentUnit = $('#unit').text();
        var newUnit = currentUnit == "C" ? "F" : "C";
        $('#unit').text(newUnit);
        if (newUnit === "F") {
            $('#temp').text(Math.round(($('#temp').text() * 1.8) + 32));
        } else {
            $('#temp').text(Math.round(($('#temp').text() - 32) / 1.8));
        }
    });

    function getWeather(lat, lon) {
        var apiUrl = api + lat + "&" + lon;
        $.ajax({
            url: apiUrl, success: function (result) {
                $('#city').text(result.name + ", ");
                $('#country').text(result.sys.country);
                $('#temp').text(result.main.temp);
                $('#unit').text(unit);
                $('#currentWeather').text(result.weather[0].main);
                $('#desc').text(result.weather[0].description);
                addIcon(result.weather[0].main);
            }
        });
    }
    function addIcon(weather) {
        var now = new Date;
        if (now.getHours() + 1 >= 6 && now.getHours() + 1 <= 18) {
          $('#icon').removeClass();
            switch (weather) {
                case 'Clear':
                    $('#icon').addClass('wi wi-day-sunny');
                    break;
            }
                $('.bg').addClass(weather);
        } else {
          $('#icon').removeClass();
            switch (weather) {
                case 'Rain':
                    $('#icon').addClass('wi wi-night-rain');
                    break;
            }
          $('.bg').addClass('night' + weather);
        }
    }

});

#container { 
    width: 100vw; 
    height: 100vh; 
    margin: auto; 
    position: absolute; 
}

p { 
    font-size: 55px; 
    margin: 25px 0; 
    font-family: 'Roboto', 
    sans-serif;
}

i { 
    font-size: 65px; 
}

.bg { 
    width: 100vw; 
    height: 100vh; 
    opacity: 0.5; 
    z-index: -10; 
}

.Clear { 
    background: url(https://images.unsplash.com/photo-1501412804587-2a024e482830?auto=format&fit=crop&w=1050&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="container">
    <p><span id="city"></span><span id="country"></span></p>
    <p><span id="temp"></span><span id="unit"></span></p>
    <p id="currentWeather"></p>
    <p id="desc"></p>
    <i id="icon"></i>
  </div>
<div class="bg"></div>

I am making a local weather app.

I want to make the unit change when the click event is executed. However, since I added the element, it doesn't work. I used the .bg tag to add a background to it, so every time the weather changes, the background will also change.

I guess it is because the .bg div covered the #container div. so I tried z-index, but it still doesn't work. What can I do to make it work? Thank you :)

Answer 1

In your situation, you could remove position: absolute from #container and add it to .bg followed with top:0;left:0, check the updated snippet below:

var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var unit = "C";
var currentTempInCelcius;

$(document).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = "lat=" + position.coords.latitude;
            var lon = "lon=" + position.coords.longitude;
            getWeather(lat, lon);
        });
    } else {
        window.alert("Geolocation is not supported by this browser.");
    }

    $('#unit').click(function () {
        var currentUnit = $('#unit').text();
        var newUnit = currentUnit == "C" ? "F" : "C";
        $('#unit').text(newUnit);
        if (newUnit === "F") {
            $('#temp').text(Math.round(($('#temp').text() * 1.8) + 32));
        } else {
            $('#temp').text(Math.round(($('#temp').text() - 32) / 1.8));
        }
    });

    function getWeather(lat, lon) {
        var apiUrl = api + lat + "&" + lon;
        $.ajax({
            url: apiUrl, success: function (result) {
                $('#city').text(result.name + ", ");
                $('#country').text(result.sys.country);
                $('#temp').text(result.main.temp);
                $('#unit').text(unit);
                $('#currentWeather').text(result.weather[0].main);
                $('#desc').text(result.weather[0].description);
                addIcon(result.weather[0].main);
            }
        });
    }
    function addIcon(weather) {
        var now = new Date;
        if (now.getHours() + 1 >= 6 && now.getHours() + 1 <= 18) {
          $('#icon').removeClass();
            switch (weather) {
                case 'Clear':
                    $('#icon').addClass('wi wi-day-sunny');
                    break;
            }
                $('.bg').addClass(weather);
        } else {
          $('#icon').removeClass();
            switch (weather) {
                case 'Rain':
                    $('#icon').addClass('wi wi-night-rain');
                    break;
            }
          $('.bg').addClass('night' + weather);
        }
    }

});

#container { width: 100vw; height: 100vh; margin: auto;  }
p { font-size: 55px; margin: 25px 0; font-family: 'Roboto', sans-serif;}
i { font-size: 65px; }
.bg { width: 100vw;position: absolute;top:0;left:0; height: 100vh; opacity: 0.5; z-index: -10; }
.Clear { background: url(https://images.unsplash.com/photo-1501412804587-2a024e482830?auto=format&fit=crop&w=1050&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) ; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="container">
    <p><span id="city"></span><span id="country"></span></p>
    <p><span id="temp"></span><span id="unit"></span></p>
    <p id="currentWeather"></p>
    <p id="desc"></p>
    <i id="icon"></i>
  </div>
<div class="bg"></div>

Answer 2

Change the position Relative for the container that is masking the click event. Below is the working solution.

var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var unit = "C";
var currentTempInCelcius;

$(document).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = "lat=" + position.coords.latitude;
            var lon = "lon=" + position.coords.longitude;
            getWeather(lat, lon);
        });
    } else {
        window.alert("Geolocation is not supported by this browser.");
    }

    $('#unit').click(function () {
        var currentUnit = $('#unit').text();
        var newUnit = currentUnit == "C" ? "F" : "C";
        $('#unit').text(newUnit);
        if (newUnit === "F") {
            $('#temp').text(Math.round(($('#temp').text() * 1.8) + 32));
        } else {
            $('#temp').text(Math.round(($('#temp').text() - 32) / 1.8));
        }
    });


    function getWeather(lat, lon) {
        var apiUrl = api + lat + "&" + lon;
        $.ajax({
            url: apiUrl, success: function (result) {
                $('#city').text(result.name + ", ");
                $('#country').text(result.sys.country);
                $('#temp').text(result.main.temp);
                $('#unit').text(unit);
                $('#currentWeather').text(result.weather[0].main);
                $('#desc').text(result.weather[0].description);
                addIcon(result.weather[0].main);
            }
        });
    }
    function addIcon(weather) {
        var now = new Date;
        if (now.getHours() + 1 >= 6 && now.getHours() + 1 <= 18) {
          $('#icon').removeClass();
            switch (weather) {
                case 'Clear':
                    $('#icon').addClass('wi wi-day-sunny');
                    break;
            }
                $('.bg').addClass(weather);
        } else {
          $('#icon').removeClass();
            switch (weather) {
                case 'Rain':
                    $('#icon').addClass('wi wi-night-rain');
                    break;
            }
          $('.bg').addClass('night' + weather);
        }
    }

});

#container{
	 width: 20%; 
	 height: 20%; 
	 margin: auto; 
  }

p { 
	font-size: 55px; 
	margin: 25px 0; 
	font-family: 'Roboto', 
	sans-serif;}

i { 
	font-size: 65px; }

.bg { 
	width: 100vw; 
	height: 100vh; 
	opacity: 0.5; 
	z-index: 1; }

.Clear { 
	background: url(https://images.unsplash.com/photo-1501412804587-2a024e482830?auto=format&fit=crop&w=1050&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) ; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
            <p><span id="city"></span><span id="country"></span></p>
            <p><span id="temp"></span><span  id="unit"></span></p>
            <p id="currentWeather"></p>
            <p id="desc"></p>
            <i id="icon"></i>
    </div>
<div class="bg"></div>

Answer 3

Hi remove position: absolute from #container and add some text to #unit span/ add some properties to it (as per your requirement).

#unit {
  width: 50px;
  height: 50px;
  display: inline-block;
}