如何從客戶端的數組中獲取用戶輸入和返回值？

Question

剛開始在網絡開發的世界...所以我希望你能幫助我在這裏...

我有一個非常簡單的網頁，它有一個窗體輸入。我想要一個腳本來接收用戶輸入並根據數組中的值生成響應。

這將是這樣的......

用戶輸入文字>>點擊鏈接>>腳本採用姓氏的第一個字母>>在與字母排列腳本輸出值。

這可能嗎？我知道你可以用onClick來做一些互動，但我不知道從哪裏開始。

任何幫助/建議將是偉大的。

Answer 1

有跡象表明，進入這樣的功能幾個不同的組件。它們分爲HTML和Javascript。首先，我們需要一個文本輸入框和一個表示「提交」的按鈕。然後我們需要一些方法來顯示基於用戶輸入的返回值。

然後，對於Javascript，我們需要一種方法來檢測用戶何時按下提交。然後我們需要檢索他的輸入，並從與該輸入對應的數組中獲取值。一些回退也會很好。

所以，讓我們先從HTML：

<input type="text" id="nameField" placeholder="Please enter your name..."> </input> <br> 
<button id="submitName" >Submit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

很簡單的東西，我們只是建立我們的投入，我們的提交按鈕。但是，我們也需要一種方法來顯示從數組返回值，所以我們將添加一個<p>（段落）元素，這樣我們就可以將其設置爲顯示我們以後text：對

<p id="valueDisplay"> </p> 

現在的Javascript：

var arrayOfValues = { 
    a: "1", 
    b: "2", 
    c: "3", 
    d: "4", 
    e: "5", 
    f: "6", 
    g: "7", 
    h: "8", 
    i: "9", 
    j: "10", 
    k: "11", 
    l: "12", 
    m: "13", 
    n: "14", 
    o: "15", 
    p: "16", 
    q: "17", 
    r: "18", 
    s: "19", 
    t: "20", 
    u: "21", 
    v: "22", 
    w: "23", 
    x: "24", 
    y: "25", 
    z: "26" 
}; 

$(document).ready(function() { 
    // first we attach an onClick handler for the submit button 
    $("#submitName").click(function() { 
     // now we need to get the value from our textbox 
     var name = $("#nameField").val(); 

     // check if the name's length is 0. If it is, we can't do anything with it. 
     if (name.length === 0) { 
      alert("Please enter a name."); 

      // cancel the function completely: 
      return; 
     } 

     // set the name to lower case 
     name = name.toLowerCase(); 

     // split the name into two words, so that we can do stuff with the first name 
     name = name.split(" "); 

     // create an empty string to hold our return value 
     var returnValue = ""; 

     // here we're going to iterate through the letters of the first name 
     for (var i = 0; i < name[0].length; i++) { 
      // name[0] refers to the first part of the name 
      var curLetter = name[0].charAt(i); 
      returnValue += arrayOfValues[curLetter]; 
     } 

     // display the new returnValue in our <p> element: 
     $("#valueDisplay").html(returnValue); 
    }); 
});​ 

以上的JavaScript是有點長，但在註釋中解釋（顯然，我希望）。你可以找到它的工作版本here。當然，arrayOfValues中的數字只是一個例子。你可以用你想要的任何值替換它們 - 只要確保它們在而不是將成爲數字時就被引用。順便提一句，arrayOfValues不是一個數組：它是一個用作關聯數組的object。

最後，我使用流行的Javascript庫jQuery在上面的腳本中使事情變得更簡單。您的功能可以在沒有jQuery的情況下創建，但它確實使事情變得更簡單。

Answer 2

你可以用js對象 < http://www.w3schools.com/js/js_objects.asp>

創建一個對象至極holdes數組裏麪包含的值是 你想輸出

var arrayOfValus = new Array('go','eat','drink','write','read'); 
function onSubmit(){ 
    //1- get the submited values 
    //2- split or change to array of char to get first letter 
    //3- use .match(submited value) to get the first matching value from the array 
    //4- do what you want with find word print or alert 
} 

，希望能幫助你， 最好祝願。

Answer 3

順便說你沒有提到你的陣列的內容

<input type="text" id="lastname" /> 
<input type="button" value="find In Array" onclick="findInArray()" />​ 

<script>  
var letters = new Array(); 
letters['m'] = 'meow'; 
letters['z'] = 'zoom'; 
letters['k'] = 'kiosk'; 

function findInArray() 
{ 
    var inp = document.getElementById('lastname').value; //get textbox value 
    var firstLetter = inp[0]; //get first character 
    alert(letters[firstLetter]); //display array content where key = firstletter 
} 
</script>