js code snippet running differently than on local server-CodePudding

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  method="post">
    <textarea  id="input" rows="10" cols="80" placeholder="Enter text here"> </textarea>
    <textarea readonly  id="output" rows="10" cols="80"></textarea>
</form>

<script src="main.js"></script>
</body>
</html>

CodePudding user response：

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  method="post">
  <textarea  id="input" rows="10" cols="80" placeholder="Enter text here"> </textarea>
  <textarea readonly  id="output" rows="10" cols="80"></textarea>
</form>

CodePudding user response：

That is simply due to the keypress event. It fires before the actual pressed key is registered. Using keyup is better in that case.

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
}

.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  method="post">
    <textarea  id="input" rows="10" cols="80" placeholder="Enter text here"> </textarea>
    <textarea readonly  id="output" rows="10" cols="80"></textarea>
</form>

<script src="main.js"></script>
</body>
</html>