HTML Выберите Dropdown ID, не передаваемый Javascript Функция getelementbyid имеет значение null

Question

Новичок здесь, пытающийся продемонстрировать ценность операций покоя на стороне клиента для товарищей по команде, поскольку они полагаются на сценарии и python. Не уверен, что это тот факт, что я использую числа для атрибута value или я ссылаюсь на getelementbyid неправильно. Честно говоря, вероятно, ничего из этого:)

Я пытался явно ссылаться на идентификатор, назначенный IP-адресу в getelementbyid для MakeUrl, но все равно не удается. Я также подумал, что на секунду это было нулевым, потому что он использовал значение по умолчанию, но я закомментировал его, и я все еще получил ошибку.

Ошибка:

Uncaught TypeError: Не удается прочитать свойство 'значение', равное нулю (функция МакУрла)

function makeUrl() {
  var ip = document.getElementById("apigatewayip").value;
  return "https://" + ip + "/api/v0/sessions"
};

function createSession(_url) {
  return $.ajax({
    "url": _url,
    "method": "POST",
    "timeout": 0,
    "headers": {
      "Content-Type": "application/json"
    },
    "data": JSON.stringify({
      "gatewayVersion": "1.00.1.15"
    }),
  });
}

createSession(makeUrl());

createSession(makeUrl()).success(function() {

});

<h1>Making AJAX Rest Calls</h1>
<div class="custom-select" style="width:200px;">
  <select name="selectip" id="apigatewayip" onchange="makeUrl">
    <option value="" disabled selected>API Gateway IP</option>
    <option value="169.254.1.10">169.254.1.10</option>
  </select>
  <button onclick="createSession">Submit</button>
</div>

Answer 1

Подождите, пока документ будет отрисован с использованием готового документа $(function() { }) и используйте jQuery, не смешивайте с устаревшим JavaScript selection

Используйте done обратный вызов вместо success

//Global function 1
function makeUrl() {
    var ip = $("#apigatewayip").val();
    return "https://" + ip + "/api/v0/sessions"
};
//Global function 2
function createSession(_url) {
  return $.ajax({
    "url": _url,
    "method": "POST",
    "timeout": 0,
    "headers": {
      "Content-Type": "application/json"
    },
    "data": JSON.stringify({
      "gatewayVersion": "1.00.1.15"
    }),
  });
}


//Wait until document fully render
$(function() {
   //After document render call the methods
   createSession(makeUrl());

   createSession(makeUrl()).done(function() {

   });
});

Answer 2

Вам нужно установить обработчики для вызова вашей функции, а не просто назначить:

<button onclick="createSession()">Submit</button>

Также вы можете просто создать URL в функции createSession:

function createSession() {
  var ip = document.getElementById("apigatewayip").value;
  var _url = "https://" + ip + "/api/v0/sessions"
  console.log(_url) // Use this for ajax call
  /*$.ajax({
    "url": _url,
    "method": "POST",
    "timeout": 0,
    "headers": {
      "Content-Type": "application/json"
    },
    "data": JSON.stringify({
      "gatewayVersion": "1.00.1.15"
    }),
  });*/
}

<h1>Making AJAX Rest Calls</h1>
<div class="custom-select" style="width:200px;">
  <select name="selectip" id="apigatewayip">
    <option value="" disabled selected>API Gateway IP</option>
    <option value="169.254.1.10">169.254.1.10</option>
  </select>
  <button onclick="createSession()">Submit</button>
</div>