CSS not taking effect on spans

Question

I'm currently having some trouble getting spans to work with this function I made in Javascript. It calls the OpenWeatherMap API and outputs current weather conditions, but adding CSS to the mix doesn't effect the spans I need it to, although doing the same sort of thing in a function to update the time does it perfectly well.

EDIT: Should probably mention that the digitalFont in my CSS is a custom font, and works perfectly fine with my other CSS elements.

JS:

function getCurrentWeather() {
    fetch('https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=')
    .then(res => res.json())
    .then(res => {

        var icon = res.weather.map(d => {return d.icon});
        var con = res.weather.map(d => {return d.main});
        var tempC = Math.floor(res.main.temp - 273.15);
        // var tempF = Math.floor((res.main.temp - 273.15) * 1.8 + 32);

        var iconPNG = `../res/img/weather_icons/${icon}.png`
        
        document.getElementById('tempC').innerHTML = `${tempC}`;
        // // document.getElementById('tempF').innerHTML = `${tempF}`;
        document.getElementById('condition').innerHTML = `${con}`
        document.getElementById('icon').innerHTML = `<img src="${iconPNG}">`

    });
}
getCurrentWeather();
setInterval(getCurrentWeather, 3600000) // Update every hour

HTML:

    <div class="weather">
        <span id="tempC"></span>C
        <span id="condition"></span>
        <span id="icon"></span>
    </div>

    <script src="index.js"></script>

CSS:

.tempC {
    font-family: digitalFont;
    font-size: 60px;
    text-align: right;
}

`tempC` appears to be an ID rather than a class - so you want `#tempC` (not `.tempC`) in your CSS — Robin Zigmond, Jun 22 '20 at 22:52

score 3 · Accepted Answer · answered Jun 22 '20 at 22:54

3

In CSS, . is used to select elements with a certain class. You need to use # to select an element with a specific id.

#tempC {
    font-family: digitalFont;
    font-size: 60px;
    text-align: right;
}

answered Jun 22 '20 at 22:54

Unmitigated

76,500
11
62
80

score 1 · Answer 2 · answered Jun 22 '20 at 23:02

Check this need to change .tempC with #tempC & content inside span tag C for applying style to selected tag.

#tempC {
    font-family: digitalFont;
    font-size: 60px;
    text-align: right;
}

 <div class="weather">
        <span id="tempC">C</span>
        <span id="condition"></span>
        <span id="icon"></span>
    </div>

    <script src="index.js"></script>

score 0 · Answer 3 · answered Jun 22 '20 at 22:54

0

You've written ID's instead of classes, try:

   <div class="weather">
        <span class="tempC"></span>C <!-- Notice here -->
        <span id="condition"></span>
        <span id="icon"></span>
    </div>

    <script src="index.js"></script>

answered Jun 22 '20 at 22:54

Ale8k

153
1
12

CSS not taking effect on spans

3 Answers3