如何从客户端的数组中获取用户输入和返回值
How can I take user input and return value from array on client side?
刚刚开始涉足web开发领域。。。所以我希望你能在这里帮助我。。。
我有一个非常简单的网页,上面有一个表单输入。我想要一个脚本,它将接受用户输入,并根据数组上的a值生成响应。
会是这样的。。。
用户输入单词>>单击链接>>脚本获取姓氏的第一个字母>>脚本输出与字母相关的数组中的值。
这可能吗?我知道你可以用onClick做一些事情来进行交互,但我不知道从哪里开始。
任何帮助/建议都会很好。
这样的功能有几个不同的组件。它们分为HTML和Javascript。首先,我们需要一个文本输入框和一个显示"提交"的按钮。然后,我们需要一些方法来显示返回的值,该值基于用户的输入。
然后,对于Javascript,我们需要一种方法来检测用户何时按下提交。然后我们需要检索他的输入,并从与该输入对应的数组中获取值。有些失误也不错。
因此,让我们从HTML:开始
<input type="text" id="nameField" placeholder="Please enter your name..."> </input> <br>
<button id="submitName" >Submit</button>
非常简单的事情,我们只是设置我们的输入和提交按钮。但我们也需要一种显示数组返回值的方法,所以我们将添加一个<p>
(段落)元素,这样我们就可以将其设置为稍后显示我们的文本:
<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有点长,但我希望在评论中能解释清楚。你可以在这里找到它的工作版本。当然,arrayOfValues
中的数字只是一个例子。你可以用你想要的任何值来替换它们——只要确保它们在引号中,如果它们是而不是将是数字。顺便说一句,arrayOfValues
不是一个数组:它是一个用作关联数组的对象。
最后,我使用了流行的Javascript库jQuery,在上面的脚本中使事情变得简单一些。您的功能可以在没有jQuery的情况下创建,但它确实使事情变得简单多了。
您可以使用js对象<http://www.w3schools.com/js/js_objects.asp>
创建一个包含数组的对象你想输出吗
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>
- 从远程脚本获取用户IP
- JSON获取用户id's在嵌套数组中
- 获取用户选择的不带时区的日期
- 如何从客户端的数组中获取用户输入和返回值
- Rails:如何获取当前用户'使用Heroku时的时区
- 如何使用Node.js脚本从Rally获取用户的修订历史
- Express.js:在用户发帖时获取用户的引荐来源网址
- 如何在Firefox中获取剪贴板文本和html当用户按下“;Ctrl+V”;
- 获取用户位置并将坐标保存在数据库中
- 获取用户按键的时间
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 为用户获取 2 个本地时间
- 从经过身份验证的用户获取打开图形操作 ID
- 使用API为用户获取最新的youtube视频链接
- 从随机网站上的登录用户获取数据
- 在一个facebook应用程序中为一个facebook用户获取不同的用户ID
- 堆栈交换API:从用户获取文章列表
- 如何从分析用户获取objectId
- 为WordPress新用户获取Facebook JSSDK变量
- 如何使用JavaScript控制台从用户获取字符串