HTML 选择下拉 ID 未传递给 Javascript 函数 getelementbyid 值为空

Question

Novice here, trying to demonstrate the value of client side rest operations to teammates as they rely on scripts and python. Not sure if it's the fact I'm using numbers for the value attribute or if I'm referencing the getelementbyid wrong. It's honestly probably none of those things :)

I've tried to explicitly reference an id assigned to the IP address in the getelementbyid for MakeUrl but it still fails. I also thought for a second it was null becasue it was using the default value but I commented it out and I still got the error.

Error:

Uncaught TypeError: Cannot read property 'value' of null (MakUrl Function)

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

You need to set the handlers to call your function, not just assign:

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

Also, you can just create the url in the createSession function:

 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>

Answer 2

Wait for the document to render using document ready $(function() { }) and use jQuery, don't mix with legacy JavaScript selection

Use done callback instead of 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() {

   });
});