0

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

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

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

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

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が一致しませんでした。");
}
});
* {
  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;
}
<!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>

2
  • まずざっとコードを見た感じで話ですが、そもそも複数の入力文字を変換できる作りになっていないようです。ENmorseCodesはあくまで入力一文字につき対応するモールス符号を保持している連想配列ですので、複数の入力文字に対して結果を得たいのであれば、ループで入力文字全てについて、対応するモールス符号を取得する必要があります。 あと、入力した文字列をtarget_array.pushで格納していますが、これだと、一文字の場合うまく行くでしょうが、複数文字がある場合、配列の配列として格納されてしまい、意図した結果にならないと思います。まずはブラウザのデヴェロッパーツールなどでJavascriptがどういう動きをしているかデバッグしてみてはどうでしょうか。 Commented 2022年12月31日 15:40
  • わかりました。 ありがとうございます! Commented 2022年12月31日 15:56

1 件の回答 1

1

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

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

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

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;

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。