I want to be able to judge and convert even one or more characters by Morse signal conversion function using JavaScript & HTML.

I want to implement the ability to convert alphabetic characters to Morse symbols using javascript and html
If the value entered in the input tag in the code below matches the key in the associative array, I could have made it to display the matching character value (Molse symbol), but it can only be converted one character at a time, so I don't know how to solve it.

Expected Output
Enter hello in input tag=>··················································

Actual Output
Enter hello in input tag (more than 2 characters) = > The key in the associative array did not match the text entered.;
Enter H in the input tag (1 character) =>... appears

What's troubling you
One or more characters are not determined or converted.

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",()=>{
  Get the alphabet you entered in the // input tag
  const input_morse = document.getElementById("input-morse").value;
  Declare an array containing the alphabet entered in the // input tag
  let target_array = [ ];
  Separate the alphabet entered in the // input tag one character at a time
  const input_split= document.getElementById("input-morse").value.split("");
  // Push the alphabet entered in the input tag into an array, one character at a time
  target_array.push(input_split);
  
if(ENmorseCodes [target_array]){
  convert_display.innerHTML = ENmorseCodes [target_array];
  console.log("The key in the associative array matches the text entered.");
} else{
  console.log("The key in the associative array did not match the text entered.");
}
});

*{
  text-decoration: none;
  box-sizing: border-box;
}

US>html{
  /* 10px = 1rem*/
  font-size: 62.5%;
}

body{
  margin:0;
}

header{
    height —8 rem;
    background-color:#515151;
    text-align:center;
}

.header-title {
    font-size: 2.5 rem;
    line-height —8 rem;
    color:#ffffff;
    margin:0;
}

main{
  background-color:antiquewhite;
  height —85vh;
  text-align:center;
  padding —10 rem;
}

US>.convert-system{
  font-size:2rem;
  margin —00 3 rem 0;
}

.input-morse{
  width —10vw;
  height —2.5vh;
}

textarea{
  display:block;
  margin —10 rem auto 0 auto;
  width —25vw;
  height: 30vh;
  font-size:2rem;
}

footer {
    height —6 rem;
    background-color:#313131;
    display:flex;
    Justify-content:center; /*Centralize child elements*
    position:relative;
    line-height:6rem;
    padding —06 rem;
}

.footer-title{
    font-size:2rem;
    margin:0;
}

<!DOCTYPE html>
<html lang="ja">

<head>
  <metacharset="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>
    <h1class="header-title"> Morse Signal Conversion Site</h1>
  </header>

  <main>
    <p class="convert-system">Alphabet=> Morse code</p>
    <input id="input-morse" class="input-morse" type="text" placeholder="Enter here"/>
    <input id="input-btn" type="button" value="conversion">
    <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>

javascript html5

2023-01-01 14:37

1 Answers

The following parts need to be repeated one letter at a time

 if (ENmorseCodes [target_array]) {
  convert_display.innerHTML = ENmorseCodes [target_array];
  console.log("The key in the associative array matches the text entered.");
} else{
  console.log("The key in the associative array did not match the text entered.");
}

Loop the for and so on.

let result=';
for(letter of input_split){
  if (ENmorseCodes [letter]) {
    result + = ENmorseCodes [letter];
    console.log("The key in the associative array matches the text entered.");
  } else{
    console.log(The key in the associative array did not match the entered text ${letter}.`);
  }
}
convert_display.innerHTML = result;

2023-01-02 08:53

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656