javascript - 使用 querySelector 获取用户输入的每个字母

Question

尝试制作一个网页，让用户输入的每个字母都以拼音字母的形式输出。例如(用户类型:Hello)(输出:Hotel、Echo、Lima、Lima、Oscar)。到目前为止，这就是我所拥有的，只需要一些关于如何获取每个字母的值并将其与数组进行比较以获得输出的指导。

//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();
}

Answer 1

我假设您想要替换输入中不可转换的字符。同样，我正在使用正则表达式。我还在“p”标签中添加了响应。代码在单击“提交”时运行。

更新:为所有字母表扩展我的数组 :)

更新 2:感谢@CharlieBatista 指出。现在，输入也接受大写字符。

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