Issue with input-output in javascript

Question

I wanted to create a morse code translator (English to morse) and wrote the back-end code with python first, so I could have it side by side with the js code and google how to do everything in js.

I created a function similar to the one in python to iterate over the input string and basically replace every character with the morse code version, then add every character in the morse code version to a new string and return it:

function eng2mc(string) {
    let output = [];
    let op = '';
    for (let item of string) {
        console.log(item)
        let morse = eng[item]
        output.push(morse)
    let i=0
    while (i<output.length) {
        for (let item of output) {
            if item==null {
                output[output.indexOf(item)] = " "
            }
            let op = op + output[i]
            let i += 1
    return op
        }
    }
    }
}

My current issue is with using the function when receiving input from one textarea in the HTML code, running it through the eng2mc function, and then displaying it in a second read-only textarea.

This is the code for the input-output:

let input = document.getElementById('input');
let output = document.getElementById('output');
input.addEventListener('keypress', function() {
    out = eng2mc(keypress);
    output.innerHTML = out;
})

And this is the HTML code with the textareas:

<form class="boxparent" method="post">
    <textarea class="textbox boxchild" id="input" rows="10" cols="80" placeholder="Enter text here"></textarea>
    <textarea readonly class="textbox boxchild2" id="output" rows="10" cols="80"></textarea>
</form>

Does anyone know why the js code might not be receiving input and/or displaying the output? thanks in advance

Answer 1

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.

Edit #2: Notice the keyup event that is used here. keypress fires before the actual pressed key is added to the textarea value.. Using keyup is better in that case, beacuse you want to have the currently pressed key as part of the actual textarea value.

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: "— • — —",
}

<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>