That is simply due to the `keypress` event. It fires before the actual pressed key is registered. Using `keyup` is better in that case.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let eng = {
"a": " ._",
'b': ' _...',
'c': ' _._.',
'd': ' _..',
'e':' .',
'f': ' .._.',
'g': ' __.',
};
let input = document.getElementById('input');
let output = document.getElementById('output');
input.addEventListener('keyup', function(event) { // keyup!!!
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
}
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
You need the `value` property of the textArea (`input`)...
And of course, also use the `value` when returning to the `output`.
Then I simplified it quite a lot.
You need only one loop on the splitted value (making it an array of characters).
And use each characters with your `eng` dictionary.
Also... the `let` keyword is to declare a variable that can be change later. So later, just assign a new value (without `let`).
`const` is to declare a variable which will not change.
**Edit**: I played a bit with it, so it will translate `Hello world`.
I added the spaces between letters and words, as described on [Wikipedia](https://en.wikipedia.org/wiki/Morse_code).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('keyup', 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
}
const eng = {
d: "— • •",
e: "•",
h: "• • • •",
l: "• — • •",
o: "— — —",
r: "• — •",
u: "• • —",
w: "• — —",
y: "— • — —",
}
<!-- language: lang-html -->
<form class="boxparent" method="post">
<textarea class="textbox boxchild" id="input" rows="10" cols="80" placeholder="Try 'Hello world'"></textarea>
<textarea readonly class="textbox boxchild2" id="output" rows="10" cols="80"></textarea>
</form>
<!-- end snippet -->
