尝试使用元素ID访问对象值的本地javascript

Trying to use element ID to access object values native javascript

本文关键字：javascript 对象 访问 元素 ID      更新时间：2023-09-26

我正在尝试编写一些代码来验证表单。我只想使用本机js（即没有jQuery等），此外我还想避开内联事件。

（的简化版本）表单如下所示：

<body onload="addListener()">
<div class="center">
    <form method="get" name="signUpForm">
        <input type="text" id="firstName"><br />
        <input type="text" id="lastName"><br />
        <input type="text" id="age"><br />
        <input type="submit" value="Submit">
    </form>
</div>

然后，我所做的是创建一个对象来包含与每个字段相关的相关信息（我刚刚在这里添加了最初的一个，以给你一个想法：

var Field = { req: true, 
              minlength: 2,
              maxlength: 20,
              errorMessage: "",
              regex: /[^a-zA-Z- ]/}
var firstName = Object.create(Field);
    firstName.maxlength = 30;
    firstName.errorMessage = "Please enter a first name between one and twenty letters. Please use only uppercase and lowercase letters spaces and hyphens.";
    firstName.regex = /[^a-zA-Z- ]/;

我现在想做的是使用触发事件的字段的id来访问field对象中包含的信息。

到目前为止，我写的两个非常简单的函数是：

function addListener(){
    document.body.addEventListener('keyup', eventIdentify);
}
function eventIdentify(){
    var target = event.target || event.srcElement;
    var id = target.id
    console.log(id.maxlength);
}

然而，在这变成了一场噩梦的地方，id.maxlength不断返回undefined。

如果我用："console.log（firstName.maxrength）；"来尝试它，那么它很好，但显然这违背了要点。不确定这里发生了什么，我怀疑这与id被用来引用两个不同的东西（元素id和对象）有关，但我对此很陌生，也不确定。

如果有人能为我指明正确的方向，我将不胜感激。

提前感谢Stef

target.id是一个字符串，因此它没有maxlength属性。一个快速的解决方案是访问名为您的id:的de variable

console.log(window[target.id].maxlength)

尽管如此，一个更好的方法是创建一个对象，并包含您已经拥有的其他对象：

var obj={};
obj.firstName=firstName;

然后你可以做：

console.log(obj[target.id].maxlength)
相关文章：