EDIT

Question

I have JQuery weather , and his also completed , but i have problem some code not showing data . in the last JQuery code called message , when the temp weather be higher show message to the user , example : if temp weather 48C show message : it's feels very how weather be careful . but the message not showing .

function validateForm() {
    var x=document.forms["myForm"]["q"].value;
    console.log('query string=' + x);
    if (x==null || x=="")
        var error = "Empty query, Please enter a query.";
    else if(/\d/.test(x)) {
        var regUKPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;
        var regUSCANZipcode = /(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXY]{1}\d{1}[A-Z]{1} *\d{1}[A-Z]{1}\d{1}$)/;
        var regLatLong = /^(-?(90|(\d|[1-8]\d)(\.\d{1,6}){0,1}))\,{1}(-?(180|(\d|\d\d|1[0-7]\d)(\.\d{1,6}){0,1}))$/;
        var validIP = function(ip) {
            var values = ip.split('.');
            if(values.length != 4) return false;

            for(var v in values)
                if(values[v] < 0 || values[v] > 255) return false;

            return true;
        };

        if(validIP(x)) {
            updateDom(x);
            return false;
        } else if(regUSCANZipcode.test(x)) {
            updateDom(x);
            return false;
        } else if(regUKPostcode.test(x)) {
            updateDom(x);
            return false;
        } else if(regLatLong.test(x)) {
            updateDom(x);
            return false;
        } else
            error = "Please enter an valid US/UK/Canada Postal Code or IP or (Lat,Long) query.";
    } else {
        updateDom(x);
        return false;
    }

    document.getElementById('status').innerHTML = error;
    return false;
};

function updateDom(q) {
    getLocalWeather(q, function(result) {
        document.getElementById('weatherData').innerHTML = result;
        document.getElementById('status').innerHTML = "";
    });

    return false;
}

function errorView(error) {
    document.getElementById('status').innerHTML = error;
}

function resultView(jsonres) {
   var template = '<div id="information" style="background-color:white;border-radius: 10px; position: absolute; width: 700px; height: 400px; margin-right: 180px;margin-top: 200px;opacity: 300;"><div id="information" style="background-color:rgba(0, 0, 0, 0.73); position: absolute; width: 700px; height: 50px;top: 0px;opacity: 300;"><h1 style="font-size:25px;float: right;position: relative;right: 20px;color: white;">36 ساعة القادمة</h1></div><div id="weather"style="position: absolute;top: 75;margin-right: 10;width: 650;"><div style="color:#07CFFC;float: left;"><%= date %>|<%= location %>\</div><br><br><div id="weathericon"style="float: left;"><div id="temp"style="float: right;font-size: 45px;"><%= temp %>&nbsp;</div><img src="<%= icon %>" alt="Weather Condition" /></div>\
     <div id"weatherDesc" style="color:#1707FC;float: right;font-size: 25px;top: 55px;  position: absolute;font-weight: bold;"><%= weatherDesc %> | الشعور الحقيقي  <%= FeelsLikeC %></div><br><br><br>\
     <div id"humidity" style="color:#1707FC;float: right;font-size: 25px;  font-weight: bold;  ">الرطوبة : <%= humidity %> <img src="http://www.calibrationservices.net/wp-content/uploads/2015/04/icon-humidity-body-effects.png"style="height: 45;  position: relative;top: 10;"></div><br><br><br><br><br>\
     <li>Min Temperature: <b><%= tempMinC %>\u2103</b></li>\
     <li>Cloud Cover: <b><%= cloudcover %></b></li>\
     <li>Humidity: <b><%= humidity %></b></li>\
     <li>Observation Time: <b><%= observation_time %></b></li>\
     <li>Precipitation: <b><%= precipMM %>MM</b></li>\
     <li>Pressure: <b><%= pressure %></b></li>\
     <li>Visibility: <b><%= visibility %></b></li>\
     <li>Wind Direction 16Point: <b><%= winddir16Point %></b></li>\
     <li>Wind Direction Degree: <b><%= winddirDegree %></b></li>\
<div id="moonrise"><%= winddirDegree %></div></div>';


    var vars = 
    {
        location: jsonres.data.request[0].query,
        date: jsonres.data.weather[0].date,
        FeelsLikeC: jsonres.data.current_condition[0].FeelsLikeC,		
        temp: jsonres.data.current_condition[0].temp_C,
        weatherDesc: jsonres.data.current_condition[0].lang_ar[0].value,
        humidity: jsonres.data.weather[0].humidity,
        tempMinC: jsonres.data.weather[0].tempMinC,
        cloudcover: jsonres.data.current_condition[0].cloudcover,
        humidity: jsonres.data.current_condition[0].humidity,
        observation_time: jsonres.data.current_condition[0].observation_time,
        precipMM: jsonres.data.current_condition[0].precipMM,
        pressure: jsonres.data.current_condition[0].pressure,
        visibility: jsonres.data.current_condition[0].visibility,
        winddir16Point: jsonres.data.current_condition[0].winddir16Point,
        winddirDegree: jsonres.data.current_condition[0].winddirDegree,
        windspeed: jsonres.data.current_condition[0].windspeedKmph,
        icon: jsonres.data.current_condition[0].weatherIconUrl[0].value,
        moonrise: jsonres.data.weather[0].hourly[0].maxtempC,
		

    };

        return _.template(template, vars);

}

function getLocalWeather(q, onResult) {
  var baseurl = "http://api.worldweatheronline.com/free/v2/weather.ashx";
  $.getJSON(baseurl + '?callback=?&lang=ar&&mca=mca&3Dno&fx24=fx24&3Dyes&includelocation=includeLocation&3Dyes&', {
    q: q,
    num_of_days: '5',
    format: 'json',
    key: '024f29167186fbffaba266b329c181e9dac4d6c7'
  })
  .done(function( jsonres ) {
      console.log('getJSON'+JSON.stringify(jsonres));
      if(jsonres.data.hasOwnProperty('error'))
          errorView(jsonres.data.error[0].msg); 
      else onResult(resultView(jsonres));
  })
  .fail(function( jqxhr, textStatus, error ) {
        var err = textStatus + ', ' + error;
          errorView("Request Failed: " + err);
		  
var temp =(jsonres.data.current_condition[0].temp_C);
             
if (temp < 46) {
    $('#message').html("it's feels cold, get a jacket");
} else if (temp < 53) {
    $('#message').html("it's feels normal");
} else {
    $('#message').html("it's feels hot, switch on your AC");
}

		 
  });
  
}

   <form name="myForm" onsubmit="return validateForm()">
   City or town name; IP address; US or Canada Postal Code or US Zipcode; (Latitude,longitude): <input type="text" name="q">
   <input type="submit" value="Submit">
   </form>
   <div style="color:#B20528"><span id="status"></span></div>
   <div id="weatherData"></div>
      <div id="message"></div>

Answer 1

First, your last two conditions are the same, I believe they should be:

if (temp < 48) {
    $('#message').html("it's feels cold, get a jacket");
} else if (temp < 53) {
    $('#message').html("it's feels normal");
} else {
    $('#message').html("it's feels hot, switch on your AC");
}

second, what is temp holding? Is it a number? or is it something like "48C" Because if it is a string your conditions will never be fulfilled.

If you get a string, you should do:

var temp = parseInt(jsonres.data.current_condition[0].temp_C);

Always assuming that jsonres.data.current_condition[0].temp_C) begins with the number followed by the temperature type.

EDIT

As per your last comment, seems that your element has actually and id and not a class, so it shoult be $('#message') instead of $('.message')

EDIT Nº2

As per the update on your question:

var temp =(jsonres.data.current_condition[0].temp_C);

Will not be a number ever, the parenthesis are making it a condition, so it will be a boolean value, should be:

var temp = parseInt(jsonres.data.current_condition[0].temp_C);

Or:

var temp = jsonres.data.current_condition[0].temp_C;

Answer 2

Try using .append()

$('.message').append("it's feels cold, get a jacket");

Warning message not shown by jQuery

2 个答案:

EDIT

EDIT Nº2