Javascript js：使用不同的参数加载相同的js代码

我有两个类似的html密码标记：

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

因为我有两个输入标签，所以我需要另一个js代码用于pass2输入，就像pass1中的一个，所以我的代码是：

var pass_input;
var pswd1="";
pass_input=document.getElementById("pass1");
pass_input.onkeyup = function(event) {
    pswd1=pswd1+event.key;
}

var pswd2="";
pass_input=document.getElementById("pass2");
pass_input.onkeyup = function(event) {
    pswd2=pswd2+event.key;
}

这段代码运行良好。在浏览器控制台中写入pswd1和pswd2的输入标记和console.log后，我得到了一个很好的结果

在我的项目中，onkeyup处理程序不像我在发布的代码中编写的那样简单，实际上更复杂。此外，该代码应该用于我的项目中的每个文本/密码输入标记，以便用于许多其他文件。因此，为了使代码正确且易于维护，我尝试将js代码放在一个公共js文件中，并在需要时加载

问题是如何在common.js文件代码中区分两个变量pswd1和pswd2。所以我想到了eval命令。因此，我的common.js文件内容是：

pass_input.onkeyup = function(event) {
    eval(pass_var_name+"="+pass_var_name+"+event.key");
}

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<script>
    var pass_input;
    var pswd1, pswd2;
    pass_input=document.getElementById("pass1");
    pass_var_name="pswd1";
</script>
<script src="common.js"></script>
<script>
    pass_input=document.getElementById("pass2");
    pass_var_name="pswd2";
</script>
<script src="common.js"></script>

我的html文件内容是：

pass_input.onkeyup = function(event) {
    eval(pass_var_name+"="+pass_var_name+"+event.key");
}

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<script>
    var pass_input;
    var pswd1, pswd2;
    pass_input=document.getElementById("pass1");
    pass_var_name="pswd1";
</script>
<script src="common.js"></script>
<script>
    pass_input=document.getElementById("pass2");
    pass_var_name="pswd2";
</script>
<script src="common.js"></script>

var pass_输入；
变量pswd1、pswd2；
pass_input=document.getElementById（“pass1”）；
通过\u var\u name=“pswd1”；
pass_input=document.getElementById（“pass2”）；
传递\u var\u name=“pswd2”；

但是，如果我执行代码并尝试写入每个输入，例如，在pass1中我写入“kkk”，在pass2中我写入“lll”，然后在浏览器控制台中显示console.log，我为pswd1获取一个空字符串，为pswd2获取字符串“kkklll”

似乎js只是在键盘点击时解释了opnkeyup处理程序中的eval

---

有没有办法纠正它？有更好的方法来实现我的目标吗？

由于

id

是唯一的，为什么不使用每个

输入的
id作为变量名（或对象键），然后这样做以重用相同的代码段呢

堆栈代码段-使用变量


var pass1=''，pass2=''//等
Array.from（document.querySelectorAll（'input'））.forEach（function（el）{
el.addEventListener（'keyup'，函数（e）{
window[this.id]+=e.key；
})  
})
document.querySelector（'button'）。addEventListener（'click'，function（）{
console.log（“pass1:+pass1”）；
console.log（“pass2:+pass2”）；
})

使用console.log显示变量值
使用映射如何？像
var paswd={'pswd1'：''，'pswd2'：''，…}
我找到了解决问题的最佳方案，并将其应用到我的项目中。我的解决方案不完全是你提出的，但本质上是你的想法。所以我可以把你的解决方案当作正确的答案。