javascript - js : load same js code with different parameters

Question

我有两个这样的 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">

我的目标是在写入每个输入时进行一些处理。所以我选择onkeyup。为了让我的问题更清楚，我可以将我的 js 代码缩减为:

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

因为我有两个输入标签，所以我需要另一个 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的input标签和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");
}

我的 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">

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

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

看来js只是在键盘点击时才解释opnkeyup处理程序中的eval。

有没有办法改正它？有没有更好的主意来实现我的目标？

Answer 1

由于 id 是唯一的，为什么不使用每个 input 的 id 作为变量名(或作为对象键)，然后这样做重用相同的代码片段

堆栈片段 - 使用变量

var pass1 = '', pass2 = ''; //etc.

Array.from(document.querySelectorAll('input')).forEach( function(el) {

  el.addEventListener('keyup', function(e) {
    window[this.id] += e.key;
  })  
  
})

document.querySelector('button').addEventListener('click', function() {
  console.log("pass1: " + pass1);
  console.log("pass2: " + pass2);
})

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

<button type="button">Show variable values with console.log</button>

---

堆栈片段 - 使用对象

var passwords = {}

Array.from(document.querySelectorAll('input')).forEach( function(el) {

  passwords[el.id] = '';   // create/init property
  
  el.addEventListener('keyup', function(e) {
    passwords[this.id] += e.key;
  })  
  
})

document.querySelector('button').addEventListener('click', function() {
  console.log(passwords);
})

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

<button type="button">Show variable values with console.log</button>