Getting an encoded string in an form field-CodePudding

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

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>

CodePudding user response：

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 >Base64 Encoding</h1>
<form >
  <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.