CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jack Clarke
Jack Clarke

Reputation: 529

Conditionally changing CSS of a div generated via jquery

I have a bit of a specific question but I'm hoping someone can help me out.

I am basically filling a div (id = 'content') with names from an array and numbers from an API. This part is all fine and the div is appended with the correct content. However, I am now trying to style that content and it is proving more difficult.

What I am trying to do is to get only the numbers to change colour depending on how high they are. My thinking was to do this by generating a span tag around the numbers via jquery and then edit the css of this span after it had been generated. Unfortunately this doesn't seem to be working and I'm wondering if it would be better to split the function up or use a completely different approach?

Any advice would be very welcome!

The code is below:

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#'+ y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#'+ y).css({
      'color': 'orange',
    });
  } else {
    $('#'+ y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
	z = z.replace(/\s/g, '')
	var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
	$.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id="+z+">" + numstring + "</span>"
    colors(num, z)
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
  });
}

var i = 0;
for (;cities[i];) {
	var city = cities[i]
  getAqi(city);
  i++
}
body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Upvotes: 1

Views: 62

Answers (3)

Cudox
Cudox

Reputation: 21

The problem is the position to call the function colors this must be to the final in the function getAqi

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#'+ y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#'+ y).css({
      'color': 'orange',
    });
  } else {
    $('#'+ y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
    z = z.replace(/\s/, '')
    var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
    $.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id="+z+">" + numstring + "</span>"
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
    colors(num, z)
  });
}

var i = 0;
for (;cities[i];) {
    var city = cities[i]
  getAqi(city);
  i++
}       
    </script>
</body>
</html>

Upvotes: 0

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4376

You are trying to access the span's before appending them to the HTML which returns null. Call the colors function after the append.

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  debugger;
  if (x <= 50) {
    $('#' + y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#' + y).css({
      'color': 'orange',
    });
  } else {
    $('#' + y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
  z = z.replace(/\s/g, '')
  var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
  $.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id=" + z + ">" + numstring + "</span>"
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
    colors(num, z);
  });
}

var i = 0;
for (; cities[i];) {
  var city = cities[i]
  getAqi(city);
  i++
}
body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Upvotes: 0

guest271314
guest271314

Reputation: 1

Call colors() after $('#content').append(span + '&nbsp;' + "|" + '&nbsp;')

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#' + y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#' + y).css({
      'color': 'orange',
    });
  } else {
    $('#' + y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
  z = z.replace(/\s/g, '')
  var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
  $.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id=" + z + ">" + numstring + "</span>"
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
    colors(num, z);
  });
}

var i = 0;
for (; cities[i];) {
  var city = cities[i]
  getAqi(city);
  i++
}
body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Upvotes: 2

Related Questions