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

Louys Patrice Bessette · Accepted Answer · 2022-08-21 19:44:37Z

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>

edited Aug 21, 2022 at 19:44

answered Aug 21, 2022 at 16:00

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

1440p Over a year ago

I tried that, but nothing shows up in the second textarea, and the console tells me, "unexpected identifier" for the if item==null line.

Louys Patrice Bessette Over a year ago

I edited... You had a couple issues...

1440p Over a year ago

I edited my input-output code as you suggested and the second textarea returns characters in the first, although it only translates the first character of two that were inputted and then displays undefined for each character input. thanks though!

Louys Patrice Bessette Over a year ago

I edited again so the snippet can translate "Hello world". ;)

Louys Patrice Bessette Over a year ago

Now it would be fun it it would play some audio beeps... ;)

|

Collectives™ on Stack Overflow

Issue with input-output in javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related