Присвоить JSON значению на входе

Question

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
  window.onload = function() {
    $.getJSON('https://api.ipify.org/?format=json', function(data) {
      $('.myip').text(data.ip);
    });
  };
</script>
<script type="text/javascript" src="https://api.ipify.org/?format=json"></script>

<script>
  $('.send').on('click', function() {
    document.getElementById('welcomeDiv').style.display = "block";
    $.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
      $('.city').text(data.city);
      $('.country_name').text(data.country_name);
      $('.country_code').text(data.country_code);
      $('.region').text(data.region);
      $('.region_code').text(data.region_code);
      $('.postal').text(data.postal);
      $('.timezone').text(data.timezone);
      $('.latitude').text(data.latitude);
      $('.longitude').text(data.longitude);
      $('.ip').text(data.ip);
      $('.org').text(data.org);
      $('.asn').text(data.asn);
    });
  });
</script>

<input type="text" name="ip" id="ip" maxlength="15" class="ipnput ip" value="">
<button type="button" class="submit send" id="showDiv" value="Check">Check</button>

В разделе javascript я использую ipify для получения IP-адреса посещающих пользователей. Я хотел бы присоединить его к входному значению html при загрузке во время выполнения второй части JS, которая выполняет вызов ipapi с этим ipify ip. Новичок в JS, поэтому надеюсь, что кто-нибудь направит меня в правильном направлении, спасибо.

Answer 1

Вы правильно поняли, но ошибки происходят из-за опечатки.

В обработчике onload вы нацелены на $('.myip'), когда в HMTL у вас нет входных данных с такой классификацией. Также вам необходимо использовать метод .val jQuery.

Также элемент скрипта с вызовом ipify.org в src является дополнительным, не требуется.

Попробуйте это:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
  window.onload = function() {
    $.getJSON('https://api.ipify.org/?format=json', function(data) {
      $('.ip').val(data.ip);
    });
  };
</script>

<script>
  $('.send').on('click', function() {
    document.getElementById('welcomeDiv').style.display = "block";
    $.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
      $('.city').text(data.city);
      $('.country_name').text(data.country_name);
      $('.country_code').text(data.country_code);
      $('.region').text(data.region);
      $('.region_code').text(data.region_code);
      $('.postal').text(data.postal);
      $('.timezone').text(data.timezone);
      $('.latitude').text(data.latitude);
      $('.longitude').text(data.longitude);
      $('.ip').text(data.ip);
      $('.org').text(data.org);
      $('.asn').text(data.asn);
    });
  });
</script>