Essayer de créer une page Web qui obtiendra chaque lettre saisie par l'utilisateur et l'affichera dans un alphabet phonétique. Par exemple (types d'utilisateurs : Hello)(Sortie : Hotel , Echo , Lima, Lima, Oscar). C'est ce que j'ai jusqu'à présent juste besoin de conseils sur la façon d'obtenir la valeur de chaque lettre et de la comparer à un tableau pour obtenir la sortie.

//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();
}
3
Charlie Batista 16 mars 2019 à 15:59

2 réponses

Meilleure réponse

Je suppose que vous souhaitez remplacer les caractères non convertibles de l'entrée. Pour la même chose, j'utilise une expression régulière. J'ai également ajouté la réponse dans une balise "p". Et le code s'exécute en cliquant sur "Soumettre".

Mise à jour : A étendu mon tableau pour tous les alphabets :)

Mise à jour 2 : Merci @CharlieBatista pour l'avoir signalé. Désormais, l'entrée accepte également les caractères majuscules.

//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>
1
Kushagr Arora 18 mars 2019 à 06:51

Vous pouvez utiliser la propriété key sur l'événement keydown du champ pour obtenir le caractère qui a été pressé.

Vérifiez ensuite si la clé est une clé imprimable en utilisant key.length === 1 (voir cette réponse).

Si la clé est imprimable, convertissez-la en majuscule, puis en son code de caractère à l'aide de String.prototype.charCodeAt() puis en soustrayez 65 (caractère A). Cela vous donnera l'indice dans votre tableau.

Si cet index est dans les limites du tableau, accédez au tableau et imprimez le caractère.

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">
1
jo_va 16 mars 2019 à 13:16