將文本輸入設置爲Javascript中的變量

我試圖將我的文本輸入用作字符串變量並將該變量用作URL的一部分來提取JSON數據，但似乎無法使其工作正常。將文本輸入設置爲Javascript中的變量

我不知道我是否設置錯誤，但任何幫助將不勝感激。謝謝！

$(document).ready(function() { 
    var p = document.querySelector('p'); 
    var input = document.getElementById('search').value; 
    $("#go").click(function() { 
     if (input === '') { 
      p.style.backgroundColor = 'transparent'; 
      p.classList.add = 'hide'; 
      p.innerHTML = ''; 
     } else { 
      $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + input + "&callback=?", function(data) { 
       p.innerHTML = "<br> Click the links below"; 
       p.classList.remove('hide'); 
       var i = 0 
       for (i; i < 5; i++){ 
        if (data[3][i] !== undefined){ 
         p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>' 
        } else { 
         p.innerHTML = ' <h2> No matching result </h2>'; 
        } 
       } 
      }); 
     } 
    }); 
});

來源

2016-02-29 Joon Park

在一次分配中的變量值，因爲它是被加載網站的時候運行，並有可能是在搜索框中沒有文本但它是空的。你想在點擊#go時間的內容，所以纔給它分配的單擊事件處理程序中：

$(document).ready(function() { 
var p = document.querySelector('p'); 
// the text field value is empty at this point 

$("#go").click(function() { 
    // this is run when user clicks #go 
    var input = document.getElementById('search').value; 
    if (input === '') { 
    p.style.backgroundColor = 'transparent'; 
    p.classList.add = 'hide'; 
    p.innerHTML = ''; 
    } 
    else { 
    // encode user input 
    $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + encodeURIComponent(input) + "&callback=?", function(data) { 
    p.innerHTML = "<br> Click the links below"; 
    p.classList.remove('hide'); 
    var i = 0 
    for (i; i < 5; i++){ 
     if (data[3][i] !== undefined){ 
     p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>' 
    } 

    else { 
     p.innerHTML = ' <h2> No matching result </h2>'; 

    } 
    } 
    }); 
    } 
}); 
});

此外，你應該始終編碼用戶輸入，如果你將其包含在一個URI。否則，當您在搜索框中使用任何非字母數字字符（包括空格）時，您會遇到意外的行爲。有關如何和爲什麼的更詳細的解釋，請參閱documentation。

來源

2016-02-29 16:35:25 danzel

非常感謝！這樣一個簡單的修復。但我確實有另一個問題。因此，這是我爲自由代碼陣營目標所做的維基百科瀏覽器，出於某種原因，當我搜索超過1個字的內容時，會導致問題。如果我搜索計算機程序，它可以工作，但是當我輸入計算機編程時，它沒有匹配的結果。但是，如果我輸入計算機程序，計算機編程就會出現。 –

只是猜測：空間和大多數其他非字母數字字符必須在網址中轉義。看看[這個答案]（http://stackoverflow.com/questions/6544564/url-encode-a-string-in-jquery-for-an-ajax-request/6544603#6544603） – danzel

我試着encodeURIComponent。看起來它給了我同樣的錯誤。當我手動輸入API網址到我的網頁瀏覽器時： https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=computer programming＆callback =？它實際上帶來了JSON數據，所以我不知道我失蹤了什麼 –

將文本輸入設置爲Javascript中的變量

回答

相關問題