Change the value of a character entered in a textfield

Question

For example, I've got the below code where I'm trying to interpret just any character entered into the textfield as the first element from my arrayOfCharacters. This sort of works however on entering a second character, doesn't function. I was wondering if anyone's got an idea as to why this isn't working. Thanks!

let arrayOfCharacters = ["‛¯¯٭٭¯¯(▫▫)¯¯٭٭¯¯", "=^..^="]

document.getElementById("input-area").onkeypress = function(evt) {
  let val = this.value
  //Transform the typed characters
  this.value = val + arrayOfCharacters[0]
}

You're setting the whole value equal to the first element of that array every time. This doesn't change just the most recent value, it changes *the whole value*. — Mike Cluck, Mar 22 '16 at 22:09
Thanks Matias! This was really silly of me! I've fixed it by appending the value of my array to the current value of the text field. — Alexander Zhelyazov, Mar 22 '16 at 22:16

score 0 · Answer 1 · answered Mar 22 '16 at 22:18

This works:

var arrayOfCharacters = ["‛¯¯٭٭¯¯(▫▫)¯¯٭٭¯¯", "=^..^="]
var totalValues = 0;
document.getElementById("input-area").onkeypress = function(evt) {
  evt.preventDefault();
  var val = this.value
  //Transform the typed characters

  // notice totalValues variable
  this.value += arrayOfCharacters[totalValues]; 
  totalValues++;
}

Example:

https://jsfiddle.net/pn8h4rqt/

Change the value of a character entered in a textfield

1 Answers1