Изменить значение символа, введенного в текстовое поле

Question

Например, у меня есть код ниже, где я пытаюсь интерпретировать любой символ, введенный в текстовое поле, как первый элемент из моего arrayOfCharacters. Однако этот вид работает при вводе второго символа, не работает. Мне было интересно, если у кого-нибудь есть идея, почему это не работает. Спасибо!

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

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

Answer 1

Это работает:

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++;
}

Пример:

https://jsfiddle.net/pn8h4rqt/