Using querySelector to get each letter a user inputs

Question

Trying to make a web page that will get each letter a user inputs and output it in a phonetic alphabet. For example (user types: Hello)(Output: Hotel , Echo , Lima, Lima, Oscar). This is what I have so far just need some guidance on how to get the value of each letter and compare it to like an Array to get the output.

//define UI variables
const userInput = document.querySelector('#input');
const phoneticAlphabet = ["Alpha"," Bravo","Charlie"];

//load all event listeners
loadEventListeners();

function loadEventListeners() {
  //add submit event 
  form.addEventListener('submit', submitInput);
}

//submit user input
function submitInput(e) {

  console.log(userInput.value);
  if (userInput.value === '') {
    alert('Add Input');
  } 
  e.preventDefault();
}

score 1 · Answer 1 · answered Mar 16 '19 at 13:16

You can use the key property on the keydown event of the field to get the character that was pressed.

Then check if the key is a printable key using key.length === 1 (see this answer).

If the key is printable, convert it to uppercase, then to its character code using String.prototype.charCodeAt() and then subtract 65 from it (character A). This will give you the index in your array.

If this index is within the bounds of the array, access the array and print the character.

const phoneticAlphabet = ['Alpha','Bravo','Charlie','Delta','Echo','Foxtrot','Golf','Hotel','India','Juliet','Kilo','Lima','Mike','November','Oscar','Papa','Quebec','Romeo','Sierra','Tango','Uniform','Victor','Whiskey','X-ray','Yankee','Zulu'];

document.querySelector('#input').addEventListener('keydown', e => {
  const isPrintable = e.key.length === 1;
  console.clear();
  if (isPrintable) {
    const idx = e.key.toUpperCase().charCodeAt(0) - 65;
    if (idx >= 0 && idx < phoneticAlphabet.length) {
      const phoneme = phoneticAlphabet[idx];
      console.log(phoneme);
    }
  }
});

<input type="text" id="input">

Kushagr Arora · Accepted Answer · 2019-03-18T06:51:57.340

I presume that you would like to replace non-convertible characters from the input. For the same, I am using regular expression. I have also added the response in a "p" tag. And the code runs on clicking "Submit".

Update: Extended my array for all alphabets :)

Update 2: Thanks @CharlieBatista for pointing out. Now, the input accepts uppercase characters as well.

//define UI variables
const form = document.phoneticForm;
const userInput = document.querySelector('#input');
const output = document.querySelector('#output');
const phoneticAlphabet = ['Alpha','Bravo','Charlie','Delta','Echo','Foxtrot','Golf','Hotel','India','Juliet','Kilo','Lima','Mike','November','Oscar','Papa','Quebec','Romeo','Sierra','Tango','Uniform','Victor','Whiskey','X-ray','Yankee','Zulu'];

//load all event listeners
loadEventListeners();

function loadEventListeners() {

  //add submit event 
  form.addEventListener('submit', submitInput);

}

//submit user input
function submitInput(e) {

  e.preventDefault();
  var value = userInput.value;
  
  if (value === '') {
      alert('Add Input');
  } else {
   value = value.replace(/[^a-zA-Z]/gi,'');
    userInput.value = value;
    value = value.toLowerCase();
    var outputArr = [];
    for(var i = 0; i < value.length; i++){
     outputArr.push(phoneticAlphabet[value.charCodeAt(i)-97]);
    }
    
    output.innerHTML = outputArr.join(', ');
  }

}

<form name="phoneticForm">
  <input type="text" id="input">
  <input type="submit">
</form>

<p id="output"></p>

Do you know why it does not accept upper case letters? Thanks for your help — Charlie Batista, Mar 16 '19 at 20:31
@CharlieBatista I am guessing the index using the "keycode" by subtracting 97. So, for uniformity in my process, I decided to convert string into lowercase. Other approach would be to add a check first if the character is lower case or uppercase, and subtract 65 (for uppercase) or 97 (for lowercase). — Kushagr Arora, Mar 18 '19 at 06:44
@CharlieBatista you were right. There was a bug. I have updated my answer. Please check it out. — Kushagr Arora, Mar 18 '19 at 06:55

Using querySelector to get each letter a user inputs

2 Answers2