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>