I have two html password tags like that:
<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">
My objective is that made some treatments while writing in each input. So I choose to onkeyup. Just to make my problem clearer I can reduce my js code to this:
var pass_input;
var pswd1="";
pass_input=document.getElementById("pass1");
pass_input.onkeyup = function(event) {
pswd1=pswd1+event.key;
}
so since I have two input tags so I need an other js code for pass2 input like the one of pass1 so my code will be:
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;
}
this code works fine. After writing in input tags and console.log of pswd1 and pswd2 in the browser console I got a good results.
In my project the onkeyup handler is not simple like what I write in the posted code, in reality it's more complicated. In addition this code should be for each text/password input tag in my project so in many other files. So to make the code proper and easier for the maintenance I tried to make the js code in a common js file and load when I need.
The question is how to differentiate between tow variables pswd1 and pswd2 in the common.js file code. So I thought about eval command. So my common.js file content is:
pass_input.onkeyup = function(event) {
eval(pass_var_name+"="+pass_var_name+"+event.key");
}
and my html file content is:
<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>
but if I execute my code and I tried to write in each input, for example in pass1 I write "kkk" and in pass2 I write "lll" then I display with console.log in the browser console I get for pswd1 an empty string and for pswd2 I get the string "kkklll".
It seems that js interprets the eval in opnkeyup handler just in the time of keyboard click.
Is there an idea how to correct it? Is there a better idea to achieve my target?
As id's are unique, why not use each input's id as the variable name (or as an object key), and then do like this to reuse the same code snippet
Stack snippet - Using variables
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>Stack snippet - Using an object
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>