

**javascriptとhtmlを使用してアルファベットからモールス記号に変換する機能を実装したい**  
下記のコードでinputタグに入力した値が連想配列のkeyと合致していた場合､合致した文字の値(モールス記号)を表示するところまでは作れたのですが､一文字ずつしか変換できず､解決方法がわかりません。

**期待する出力**  
inputタグにHELLOを入力 => ・・・・ ・ ・－・・ ・－・・ －－－ が表示

**実際の出力**  
inputタグにHELLOを入力(2文字以上) => 入力されたテキストと連想配列のkeyが一致しませんでした。;  
inputタグにHを入力(1文字) => ・・・・ が表示

**困っている事**  
一文字以上は判定・変換されない｡

[code]

    const ENmorseCodes = {
      "A": "・－",
      "B": "－・・・",
      "C": "－・－・",
      "D": "－・・",
      "E": "・",
      "F": "・・－・",
      "G": "－－・",
      "H": "・・・・",
      "I": "・・",
      "J": "・－－－",
      "K": "－・－",
      "L": "・－・・",
      "M": "－－",
      "N": "－・",
      "O": "－－－",
      "P": "・－－・",
      "Q": "－－・－",
      "R": "・－・",
      "S": "・・・",
      "T": "－",
      "U": "・・－",
      "V": "・・・－",
      "W": "・－－",
      "X": "－・・－",
      "Y": "－・－－",
      "Z": "－－・・",
      "1": "・－－－－",
      "2": "・・－－－",
      "3": "・・・－－",
      "4": "・・・・－",
      "5": "・・・・・",
      "6": "－・・・・",
      "7": "－－・・・",
      "8": "－－－・・",
      "9": "－－－－・",
      "0": "－－－－－",
      ".": "・－・－・－",
      ",": "－－・・－－",
      ":": "－－－・・・",
      "?": "・・－－・・",
      "_": "・・－－・－",
      "+": "・－・－・",
      "-": "－・・・・－",
      "*": "－・・－",
      "^": "・・・・・・",
      "/": "－・・－・",
      "@": "・－－・－・",
      "(": "－・－－・",
      ")": "－・－－・－",
      '"': "・－・・－・",
      "'": "・－－－－・",
      "=": "－・・・－",
      "delete": "・・・・・・・・",
    };
    
    const input_btn = document.getElementById("input-btn");
    const convert_display = document.getElementById("convert-display");
    
    input_btn.addEventListener("click", () => {
      //inputタグに入力したアルファベットを取得
      const input_morse = document.getElementById("input-morse").value;
      //inputタグに入力されたアルファベットを入れる配列を宣言
      let target_array = [];
      //inputタグに入力されたアルファベットを1文字ずつ分ける
      const input_split = document.getElementById("input-morse").value.split("");
      //inputタグに入力されたアルファベットを1文字ずつ分け配列にプッシュする
      target_array.push(input_split);
      
    if (ENmorseCodes[target_array]) {
      convert_display.innerHTML = ENmorseCodes[target_array];
      console.log("入力されたテキストと連想配列のkeyが一致しました。");
    } else {
      console.log("入力されたテキストと連想配列のkeyが一致しませんでした。");
    }
    });
[/code]

[code]

    * {
      text-decoration: none;
      box-sizing: border-box;
    }
    
    html {
      /* 10px = 1rem */
      font-size: 62.5%;
    }
    
    body {
      margin: 0;
    }
    
    header {
        height: 8rem;
        background-color: #515151;
        text-align: center;
    }
    
    .header-title {
        font-size: 2.5rem;
        line-height: 8rem;
        color: #ffffff;
        margin: 0;
    }
    
    main {
      background-color: antiquewhite;
      height: 85vh;
      text-align: center;
      padding: 10rem;
    }
    
    .convert-system {
      font-size: 2rem;
      margin: 0 0 3rem 0;
    }
    
    .input-morse {
      width: 10vw;
      height: 2.5vh;
    }
    
    textarea {
      display: block;
      margin: 10rem auto 0 auto;
      width: 25vw;
      height: 30vh;
      font-size: 2rem;
    }
    
    footer {
        height: 6rem;
        background-color: #313131;
        display: flex;
        justify-content: center; /* 子要素を中央揃え */
        position: relative;
        line-height: 6rem;
        padding: 0 6rem;
    }
    
    .footer-title {
        font-size: 2rem;
        margin: 0;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="./css/style.css" />
      <title>MorseCode Converter</title>
    </head>
    
    <body>
      <header>
        <h1 class="header-title">モールス信号変換サイト</h1>
      </header>
    
      <main>
        <p class="convert-system">アルファベット => モールス符号</p>
        <input id="input-morse" class="input-morse" type="text" placeholder="ここに入力" />
        <input id="input-btn" type="button" value="変換">
        <textarea id="convert-display" name="" id="" cols="30" rows="10"></textarea>
      </main>
    
      <footer>
        <p class="footer-title">MorseCode Converter</p>
      </footer>
    
      <script src="./js/script.js"></script>
    </body>
    
    </html>
[/code]


CC BY-SA 4.0
2022-12-31T14:41:56.497
93127
2023-01-01T06:52:32.050
2022-12-31T14:50:56.553
56309
56309
question
javascript html5
JavaScript＆HTMLを使用したモールス信号変換機能で1文字以上でも判定・変換されるようにしたい｡


1文字ずつ繰り返す必要があるので、以下の部分

[code]

    if (ENmorseCodes[target_array]) {
      convert_display.innerHTML = ENmorseCodes[target_array];
      console.log("入力されたテキストと連想配列のkeyが一致しました。");
    } else {
      console.log("入力されたテキストと連想配列のkeyが一致しませんでした。");
    }
    
[/code]

を、`for` などでループさせるとよいでしょう。

[code]

    let result = '';
    for (let letter of input_split) {
      if (ENmorseCodes[letter]) {
        result += ENmorseCodes[letter];
        console.log("入力されたテキストと連想配列のkeyが一致しました。");
      } else {
        console.log(`入力されたテキスト ${letter} と連想配列のkeyが一致しませんでした。`);
      }
    }
    convert_display.innerHTML = result;
    
[/code]


CC BY-SA 4.0
2023-01-01T06:52:32.050
93136
2023-01-01T06:52:32.050
3475
93127
answer