Issue with input-output in javascript-CodePudding

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

CodePudding user response：

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.

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.split("")
  console.log(characters)
  for (let character of characters) {
    console.log(character)
    output  = '...' //eng[character]
  }
  return output
}

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