.getJSON won't succeed even though URL works
<p>HTML</p>

<pre><code>&lt;body&gt;
    &lt;header&gt;
        &lt;div class="container-fluid"&gt;
            &lt;h1&gt;Wikipedia Viewer&lt;/h1&gt;
            &lt;form id="userInput"&gt;
                &lt;input id="query" type="text" name="userInput" value="" placeholder="Search"&gt;
                &lt;input id="submitBtn" type="submit" name="send" value="Click!"&gt;
            &lt;/form&gt;
            &lt;a id="randomArticle" href="https://en.wikipedia.org/wiki/Special:Random"&gt;&lt;i class="fa fa-random fa-2x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="results"&gt;
         &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Javascript</p>

<pre><code> var url = "https://en.wikipedia.org/w/api.php?action=opensearch&amp;datatype=json&amp;callback=?&amp;search=";
    var userQuery = "";
    var html = "";
    $(document).ready(function () {
        $("#userInput").submit(function (e) {
            userQuery = document.getElementById("query").value;
            $.getJSON(url + userQuery, function (data) {
                for (var i = 0; i &lt; data[1].length; i++) {
                    html = '&lt;article&gt;&lt;a href="' + data[3][i] + '"target="_blank"&gt;&lt;h3&gt;' + data[1][i] + '&lt;/h3&gt;&lt;p&gt;' + data[2][i] + '&lt;/p&gt;&lt;/a&gt;&lt;/article&gt;';
                    $(".results").append(html);
                }
            });
        });
    });
</code></pre>

<p>When I get to the .getJSON it just won’t succeed, I have tested the URL and the JSON comes up in browser but the request using Jquery just won’t work.</p>