Javascript 如何从客户端的数组中获取用户输入和返回值？

刚刚开始在世界上的网页开发。。。所以我希望你能帮我

我有一个非常简单的网页，上面有一个表单输入。我希望有一个脚本，它将接受用户输入并根据数组上的a值生成响应

可能是这样的

用户输入单词>>单击链接>>脚本获取姓氏的第一个字母>>脚本输出与字母相关的数组中的值

这可能吗？我知道你可以用onClick进行交互，但我真的不知道从哪里开始

任何帮助/建议都很好。

您可以使用js对象 <>

创建一个包含数组的对象，数组中包含 您想要输出吗

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
}

希望能对你有所帮助,，

---

最美好的祝愿。

​顺便说一下，您没有提到数组的内容

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

​
变量字母=新数组（）；
字母['m']='meow'；
字母['z']='zoom'；
字母['k']='kiosk'；
函数findInArray（）
{
var inp=document.getElementById（'lastname'）.value；//获取文本框值
var firstLetter=inp[0]；//获取第一个字符
警报（字母[firstLetter]）；//在key=firstLetter的位置显示数组内容
}

像这样的功能中有几个不同的组件。它们分为HTML和Javascript。首先，我们需要一个文本输入框和一个写着“提交”的按钮。然后我们需要某种方式来显示返回的值，它基于用户的输入

然后，对于Javascript，我们需要一种方法来检测用户何时按submit。然后我们需要检索他的输入，并从与该输入对应的数组中获取值。一些退路也不错

那么，让我们从HTML开始：

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

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);
    });
});​

提交​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

非常简单的东西，我们只是设置输入和提交按钮。但是我们还需要一种显示数组返回值的方法，因此我们将添加一个

（段落）元素，以便我们可以将其设置为以后显示文本：

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

现在来看Javascript：

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

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);
    });
});​

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”，
问题：“17”，
r:“18”，
s:“19”，
t:“20”，
u:“21”，
五：“22”，
w:“23”，
x:“24”，
y:“25”，
z:“26”
};
$（文档）.ready（函数（）{
//首先，我们为提交按钮附加一个onClick处理程序
$（“#submitName”）。单击（函数（）{
//现在我们需要从文本框中获取值
变量名称=$（“#名称字段”）.val（）；
//检查名称的长度是否为0。如果是，我们无法对其执行任何操作。
如果（name.length==0）{
警报（“请输入名称”）；
//完全取消该功能：
返回；
}
//将名称设置为小写
name=name.toLowerCase（）；
//把名字分成两个单词，这样我们就可以用名字做一些事情
name=name.split（“”）；
//创建一个空字符串来保存我们的返回值
var returnValue=“”；
//在这里，我们将重复第一个名字的字母
对于（var i=0；i

上面的Javascript有点长，但在评论中有解释（我希望很清楚）。你可以找到它的工作版本。当然，

arrayOfValues

中的数字只是一个例子。你可以用你想要的任何值替换它们——只要确保它们在引号中，如果它们不是数字<顺便说一句，code>arrayOfValues不是数组：它是一个用作关联数组的数组

---

最后，我使用了流行的Javascript库，使上述脚本中的问题变得简单一些。您的功能可以在没有jQuery的情况下创建，但它确实使事情变得更简单。

您所说的与字母相关的数组是什么意思？该数组的内容是什么？首先用onclick调用函数。你能做到吗？接下来读取输入。你能做到吗？接下来了解substr或charAt。接下来了解数组索引。注意数组键中的小写/大写。最好使用

placeholder=“请输入您的姓名…”

而不是

value=“请输入您的姓名…”

Mm，这一点很好。实际上，我不知道占位符的值——我猜你每天都会学到新东西非常感谢。。。正是我需要的没问题，很高兴我能帮上忙。