Getting an encoded string in an form field

October 19, 2022

I need some help with getting my encoded string shown in a form field.
I have an input field, where the (should) string get encoded, and an output field where the encoded string should show..

let text = 'hello world';
let encoded = btoa(text);

const output = document.getElementById('output1')
const input = document.getElementById('input1');
input.addEventListener('inputEvent', event => {
  if (input.value == text) {
    if (event) output.textContent.encoded.value;
  }
})

<h1 class='h1'>Base64 Encoding</h1>
<form class='formEnc'>
  <label>Input</label>
  <input type='text' id='input1'>
  <label>Output</label>
  <input type='text' id='output1'></textarea>
</form>

<h1 class='h1'>Base64 Decoding</h1>
<form class='formDec'>
  <label>Input</label>
  <input type='text' id='input2'>
  <label>Output</label>
  <input type='text' id='output2'></textarea>
</form>

>Solution :

There’s two main issues in your code. Firstly the event is input, not inputEvent. Secondly, you need to set the output.value to the encoded string. It’s not a property of the text of the element.

let text = 'hello world';
let encoded = btoa(text);

const output = document.getElementById('output1')
const input = document.getElementById('input1');

input.addEventListener('input', event => {
  if (input.value == text) {
    output.value = encoded;
  }
})

<h1 class="h1">Base64 Encoding</h1>
<form class="formEnc">
  <label>Input</label>
  <input type="text" id="input1" />
  <label>Output</label>
  <input type="text" id="output1" />
</form>

Also note that you don’t need to check for if (event) – if the event hasn’t happened then the handler wouldn’t have been invoked. In addition your HTML has some issues, such as needless </textarea> tags.