javascript function not activating

So I'm developing a program using the spotify api and am currently using their example codes to get familiar with the api. So for now, I am trying to insert my stuff into their stuff just to see if what I want to do is possible. So for starters, I need to get a playlist id from the user, so as a result I ask them for it with the form tag.

<form onsubmit="MyKey()">
    Enter playlist ID:<br>
    <input type = "text" id = "MyKey" value = "">
    <input type = "button" value = "submit"/>
  </form>

and then It calls this function:

 <script>
  function MyKey(){
var playlist = document.getElementById('MyKey');
console.log(playlist);
 function getHashParams() {
      var hashParams = {};
      var e, r = /([^&;=]+)=?([^&;]*)/g,
          q = window.location.hash.substring(1);
      while ( e = r.exec(q)) {
         hashParams[e[1]] = decodeURIComponent(e[2]);
      }
      return hashParams;
    }

    var params = getHashParams();

var access_token = params.access_token,
refresh_token = params.refresh_token,
error = params.error;

console.log(access_token);
console.log(playlist);
document.getElementById('MyKey').addEventListener('submit',function() {
console.log(playlist);

$.ajax({
            url: 'https://api.spotify.com/v1/playlists/'+playlist+'/tracks?fields=items(track.id)',
            type: GET,
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              console.log(response.items);
            }
        });
      },false);

  }
</script>

I put console logs to see if I was even getting the variable stored properly and I am not. Nothing prints on the console when I hit submit. So my current theory is that when I hit submit, nothing happens as the console logs would tell me stuff is undefined. So why isn't my script activating? Thank you for any assistance. Furthermore, the form I have is inside of a script so I don't know if that affects anything but I imagine it wouldn't as in programming languages you can call a method from withing a method.

Solution

The main error is in the HTML, not the JavaScript. In order to submit a form through a button, you need to set the type to submit so the browser knows to call the onsubmit function.

You needed to actually get the value of the input, not the element itself. You typically don't want nested functions, as all it does is hurts the readability.

Everything should work if your URL is formatted correctly and the playlist ID / authentication ID is correct.

Working JavaScript:

function handleSubmit() {

    // Get the value of the element
    var playlist = document.getElementById('MyKey').value;

    var params = getHashParams();

    var access_token = params.access_token,
        refresh_token = params.refresh_token,
        error = params.error;

    console.log(access_token);
    console.log(playlist);

    $.ajax({
        url: 'https://api.spotify.com/v1/playlists/' + playlist + '/tracks?fields=items(track.id)',
        type: 'GET',
        headers: {
            'Authorization': 'Bearer ' + access_token
        },
        success: function (response) {
            // Handle response
            console.log(response.items);
        }
    });

    return false;
}

// Make sure your URL contains something along the lines of
// #access_token=123&refresh_token=abc
function getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    while (e = r.exec(q)) {
        hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
}

Working HTML:

<form action="#" onsubmit="return handleSubmit();">
  Enter playlist ID:<br>
  <input type="text" id="MyKey" value="">
  <button type="submit">Submit</button>
</form>