Issue
This is part of the code for a morse code translator I tried to make, with part of the JS code written by Louys Patrice Bessette. In the JS code snippet provided by this user in an answer to another question runs perfectly, but after implementing the code in a JS file for part of the webpage, the user needs to type another character or space after a word in one textarea to complete it in morse code in a second textarea.
let eng = {
"a": " ._",
'b': ' _...',
'c': ' _._.',
'd': ' _..',
'e':' .',
'f': ' .._.',
'g': ' __.',
};
let input = document.getElementById('input');
let output = document.getElementById('output');
input.addEventListener('keypress', function(event) {
out = eng2mc(input.value);
output.value = out;
})
function eng2mc(string) {
let output = "";
const characters = string.toLowerCase().split("")
console.log(characters)
for (let character of characters) {
console.log(character)
if (character === " ") {
output += " " // 4 spaces (+3 of last letter, makes 7)
} else if(eng[character]){
output += eng[character] + " " // 3 spaces between letters
}
}
return output
}.boxparent {
display: flex;
flex-wrap: wrap;
margin: auto;
margin-top: 2%;
width: 50%;
}
.textbox {
font-size: .8rem;
letter-spacing:1px;
font-family: Palatino Linotype;
padding:10px;
line-height:1.5;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow:1.25px 1.25px 1.25px #222222;
resize: none;
}
#entertext {
position:absolute;
font-size:20px;
margin-left:585px;
font-family: Palatino Linotype;
}
#input {
display:inline-block;
padding:10px;
}
#output {
position:relative;
right:-16px;
}<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<head>
<title>Morse Code Translator</title>
</head>
<link rel="stylesheet" href="main.css">
<style>
body {
background-color:#555555;
}
</style>
<body>
<br>
<form class="boxparent" method="post">
<textarea class="textbox" id="input" rows="10" cols="80" placeholder="Enter text here"> </textarea>
<textarea readonly class="textbox" id="output" rows="10" cols="80"></textarea>
</form>
<script src="main.js"></script>
</body>
</html>Solution
This can be vastly simplified. Also use input event to allow pasting instead of the keypress that gives you the problem
const eng = { " ": " ", "a": " ._", "b": " _...", "c": " _._.", "d": " _..", "e": " .", "f": " .._.", "g": " __." };
const input = document.getElementById('input');
const output = document.getElementById('output');
const eng2mc = string => string
.trim()
.toLowerCase()
.split("")
.map(char => eng[char] || "?")
.join(" ");
input.addEventListener('input', () => output.value = eng2mc(input.value));body {
background-color: #555555;
}
.boxparent {
display: flex;
flex-wrap: wrap;
margin: auto;
margin-top: 2%;
width: 50%;
}
.textbox {
font-size: .8rem;
letter-spacing: 1px;
font-family: Palatino Linotype;
padding: 10px;
line-height: 1.5;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1.25px 1.25px 1.25px #222222;
resize: none;
}
#entertext {
position: absolute;
font-size: 20px;
margin-left: 585px;
font-family: Palatino Linotype;
}
#input {
display: inline-block;
padding: 10px;
}
#output {
position: relative;
right: -16px;
}<form class="boxparent" method="post">
<textarea class="textbox" id="input" rows="10" cols="80" placeholder="Enter text here"> </textarea>
<textarea readonly class="textbox" id="output" rows="10" cols="80"></textarea>
</form>Answered By - mplungjan
