document.getElementById - Uncaught ReferenceError: $ не определено - PullRequest
0 голосов
/ 07 июня 2019

Пожалуйста, извините за этот чрезвычайно тривиальный вопрос, но я только начал немного экспериментировать с Javascript, но не могу понять, где я ошибся с этим.

Uncaught ReferenceError: температура не определена

Мы ценим каждый маленький совет!

$.ajax({
url: 'https://api.weather.gov/gridpoints/EWX/92,61/forecast/hourly' }).done(function(res) {
var temp = res.properties.periods[0].temperature;
});

function test () {
document.getElementById('temperature').innerHTML = temp;
}

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

AJAX - это асинхронный вызов. temp всегда будет неопределенным при каждом вызове функции test. Вы можете достичь желаемого, выполнив следующие действия:

function test() {
    $.ajax({
        url: 'https://api.weather.gov/gridpoints/EWX/92,61/forecast/hourly' 
    })
    .done(function(res) {
        var temp = res.properties.periods[0].temperature;
        document.getElementById('temperature').innerHTML = temp;
    });
}
0 голосов
/ 07 июня 2019

Используйте внешний тэг скрипта в вашей голове, например <head><script type='text/javascript' src='folder/file.js'></script></head>.На file.js это будет похоже на $(function(){ /* put all your code in here */ });.Конечно, если вы хотите что-то сделать после асинхронного действия, это должно произойти тогда.Смотрите следующее:

//<![CDATA[
/* js/external.js */
$(function(){ // jQuery load
$.get('https://api.weather.gov/gridpoints/EWX/92,61/forecast/hourly', function(resultObj){
  $('#out').html(resultObj.properties.periods[0].temperature+'&#0176; F');
});
}); // jQuery load end
//]]>
/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px 5px;
}
#out{
 margin-top:10px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
    Look in the &lt;head&gt; above then at the jQuery below
    <div id='out'></div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...