用户输入名称 JavaScript 输出等于附加到名称中每个字母的变量 [关闭]

Question

这是我的第一个 JavaScript 项目。我想要做的是当用户在那里输入名称时，例如“Blake”它将输出“Bravo Lima Alpha Kilo Echo”。因此，无论用户输入什么，它都会输出每个字母变量等于什么。我添加了一张图片以更好地解释我在说什么。我也了解当有人以表格形式输入名称时，它会在那里输出名称。但我不确定如何输出一个等于名称中每个字母的变量。

var A = "Alpha";
var B = "Bravo";
var C = "Charlie";
var D = "Delta";
var E = "Echo";
var F = "Foxtrot";
var G = "Golf";
var H = "Hotel";
var I = "India";
var J = "Juliett";
var K = "Kilo";
var L = "Lima";
var M = "Mike";
var N = "November";
var O = "Oscar";
var P = "Papa";
var Q = "Quebec";
var R = "Romeo";
var S = "Sierra";
var T = "Tanga";
var U = "Uniform";
var V = "Victor";
var W = "Whiskey";
var X = "X-ray";
var Y = "Yankee";
var Z = "Zulu"; 



document.getElementById("test").innerHTML =
A + "<br>" + B + "<br>" + C;

<div id="test">

</div>

Answer 1

无需更改代码的简单代码

HTML：

<input type="text" id="test">
<button id="btn">submit</button>
  <div id="output">

javascript：

var A = "Alpha";
      var B = "Bravo";
      var C = "Charlie";
      var D = "Delta";
      var E = "Echo";
      var F = "Foxtrot";
      var G = "Golf";
      var H = "Hotel";
      var I = "India";
      var J = "Juliett";
      var K = "Kilo";
      var L = "Lima";
      var M = "Mike";
      var N = "November";
      var O = "Oscar";
      var P = "Papa";
      var Q = "Quebec";
      var R = "Romeo";
      var S = "Sierra";
      var T = "Tanga";
      var U = "Uniform";
      var V = "Victor";
      var W = "Whiskey";
      var X = "X-ray";
      var Y = "Yankee";
      var Z = "Zulu"; 
      var obj = {
        a: A,
        b: B,
        c: C,
        d: D,
        e: E,
        f: F,
        g: G,
        h: H,
        i: I,
        j: J,
        k: K,
        l: L,
        m: M,
        n: N,
        o: O,
        p: P,
        q: Q,
        r: R,
        s: S,
        t: T,
        u: U,
        v: V,
        w: W,
        x: X,
        y: Y,
        z: Z
      }
      var ele1 = document.getElementById("test");
      var ele2 = document.getElementById("output");
      var ele3 = document.getElementById("btn");
      var val="";
      ele3.addEventListener("click", function(e){
        var arr = ele1.value.split('');
        for (let index = 0; index < arr.length; index++) {
          val += obj[arr[index]] + ' ';
        }
        ele2.innerHTML = val;
      })

Answer 2

您需要遍历 input 并在 div 中设置值。假设input 是您输入名称的input 的id。

HTML：

<input type="input" />
<div id="test">

</div>

JS

var data = {
 A: "Alpha",
 B: "Bravo",
 C: "Charlie",
 D: "Delta",
 E: "Echo",
 F: "Foxtrot",
 G: "Golf",
 H: "Hotel";,
 I: "India",
 J: "Juliett",
 K: "Kilo",
 L: "Lima",
 M: "Mike",
 N: "November",
 O: "Oscar",
 P: "Papa",
 Q: "Quebec",
 R: "Romeo",
 S: "Sierra",
 T: "Tanga",
 U: "Uniform",
 V: "Victor",
 W: "Whiskey",
 X: "X-ray",
 Y: "Yankee",
 Z: "Zulu"
}

document.getElelementById("input").addEventListener("change", function() {
    const input = this.value;
    let name = "";
    for(let i = 0; i < input.length; i++){
       name = `${name} ${data[input[i].toUpperCase()]}`;
    }
    document.getElementById("test").innerHTML = name;
})

Answer 3

Here the catch would be how should we able to get the variable value after splitting the work entered in the input.. Use eval('Z') which would evaluate that as a JS code , in this case a variable     
<code>
    var name = "Blake";
    var A = "Alpha";
    var B = "Bravo";
    var C = "Charlie";
    var D = "Delta";
    var E = "Echo";
    var F = "Foxtrot";
    var G = "Golf";
    var H = "Hotel";
    var I = "India";
    var J = "Juliett";
    var K = "Kilo";
    var L = "Lima";
    var M = "Mike";
    var N = "November";
    var O = "Oscar";
    var P = "Papa";
    var Q = "Quebec";
    var R = "Romeo";
    var S = "Sierra";
    var T = "Tanga";
    var U = "Uniform";
    var V = "Victor";
    var W = "Whiskey";
    var X = "X-ray";
    var Y = "Yankee";
    var Z = "Zulu"; 
    var nameArr = name.split("");
    var output="";
    for(var xx=0;xx<nameArr.length;xx++){
    console.log(nameArr[xx]);
    output+=eval(nameArr[xx].toUpperCase())+" ";
    }
    console.log(output); // Assign this value to a ID using innerHTML function
    </code>

Answer 4

除了将每个代码都作为一个新变量之外，您还可以使用一个数组（最好是一个映射），然后检查输入名称的每个字母 检查数组是否有任何以该字母开头的单词，类似于以下内容：

let codes = ["Alpha","Bravo","Charlie","Delta","Echo","Foxtrot","Golf","Hotel","India","Juliett","Kilo","Lima","Mike","November","Oscar","Papa","Quebec","Romeo","Sierra","Tanga","Uniform","Victor","Whiskey","X-ray","Yankee","Zulu"];

input.addEventListener("keyup", (e) => {
  let code = [];
  let name = e.target.value.toUpperCase();
  for (let i = 0; i < name.length; i++) {
    for (let j = 0; j < codes.length; j++) {
      if (name[i] === codes[j][0]) {
        code.push(codes[j]);
        continue;
      }
    }
  }
  document.getElementById("test").innerHTML = code.join(" ");
});

<input type="text" id="input" />
<div id="test"></div>

Answer 5

我会使用string.split()、array.map() 和array.join() 的组合

既然你说你是 JS 的新手，我也会直接告诉你查看我用作 .map() 回调的 arrow functions。

var A = "Alpha";
var B = "Bravo";
var C = "Charlie";
var D = "Delta";
var E = "Echo";
var F = "Foxtrot";
var G = "Golf";
var H = "Hotel";
var I = "India";
var J = "Juliett";
var K = "Kilo";
var L = "Lima";
var M = "Mike";
var N = "November";
var O = "Oscar";
var P = "Papa";
var Q = "Quebec";
var R = "Romeo";
var S = "Sierra";
var T = "Tanga";
var U = "Uniform";
var V = "Victor";
var W = "Whiskey";
var X = "X-ray";
var Y = "Yankee";
var Z = "Zulu"; 




function spellWord(word){
  const uppercaseWord = word.toUpperCase() // in case they type lowercase letters
  const array = uppercaseWord.split('')
  const newArray = array.map(letter => window[letter])
  return newArray.join(' ')
}

document.getElementById("test").innerHTML = spellWord("testing")

<div id="test">

</div>