试图弄清楚为什么jsonp请求不能用于表单请求

Question

我有两个jsonp请求转到第三方。我的第一次尝试https://jsfiddle.net/8k3f7b1v/13/没有运行。控制台读取，＆＃39;无法在null＆＃39;

上执行addEventListner

我看了几遍，似乎无法弄清楚为什么它会在那个特定区域突破。为什么表单为null。

以下是其他人的工作版本https://jsfiddle.net/8k3f7b1v/12/。两种形式都使用makeUrl和来自searchField的查询，但我不理解为什么这样做而不是另一种。

HTML

<form id="search-container-form">
 <label for="search">Search <input id="search" type="text"></label>
 <input type="submit" value="GO">
</form>
<h1>
 Output
</h1>
<div id="output">
</div>

//non working fiddle JS

var form = document.getElementById('search-container-form')
var searchField

function defaultUrl() {
 return 'https://api.twitch.tv/kraken/search/streams?q=mario&callback=appendResults'
}

function makeUrl(query) {
 return `https://api.twitch.tv/kraken/search/streams?q=${query}&callback=appendResults`
}

function getJSON(url) {
 var script = document.createElement('script')
 script.src = defaultUrl()

 script.onload = function() {
  this.remove()
}

 var head = document.getElementsByTagName('head')[0]
 head.insertBefore(script, null)
}

form.addEventListener('submit', function(e) {
 e.preventDefault()

 var searchField = document.getElementById('search').value
 getJSON(makeUrl(searchField))
})

getJSON(defaultUrl())

window.appendResults = function(data) {
 console.log(data)
}