javascript 功能未激活

Question

所以我正在使用 spotify api 开发一个程序，目前我正在使用他们的示例代码来熟悉 api。 所以现在，我正在尝试将我的东西插入他们的东西中，只是为了看看我想做的事情是否可行。 所以对于初学者来说，我需要从用户那里获得一个播放列表 ID，因此我通过表单标签向他们询问。

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

然后它调用这个函数：

 <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>

我放了控制台日志来查看是否正确存储了变量，而我没有。 当我点击提交时，控制台上没有打印任何内容。 所以我目前的理论是，当我点击提交时，没有任何反应，因为控制台日志会告诉我东西是未定义的。 那么为什么我的脚本没有激活？ 感谢您提供任何帮助。 此外，我拥有的表单在脚本内部，所以我不知道这是否会影响任何事情，但我想它不会像在编程语言中那样，您可以通过方法调用方法。

Answer 1

主要错误在于 HTML，而不是 JavaScript。 为了通过按钮提交表单，您需要设置要提交的类型，以便浏览器知道调用onsubmit函数。

您需要实际获取输入的值，而不是元素本身。 您通常不想要嵌套函数，因为它所做的只是损害了可读性。

如果您的 URL 格式正确且播放列表 ID/身份验证 ID 正确，则一切正常。

工作 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;
}

工作 HTML：

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