CODEWITHSUNDEEP
javascripthtmldom
Pegasus18
Pegasus18

Reputation: 300

Implementing DOM and JS to convert textarea input into a textarea output box

I am trying to implement a program I created when working through FreeCodeCamp's Javascript course, I am trying to use a rot13 encryption function to convert the input text in a html textarea box into an altered string in an output textarea box. I can't seem to get the corresponding elements to change, hopefully someone can point out what I am doing wrong. The two boxes have ID of input_text and output_text respectively.

HTML

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id='page_container'>
      <h1 id=main_title>ROT-13 Encryption Generator</h1>
      <label id='label_input' for='input_text'>What would you like to encrypt?</label>
      <textarea id='input_text' rows=5></textarea>
      <label id='label_output' for='output_text'>Here you go</label>
      <textarea id='output_text' rows=5></textarea>
    </div>
  </body>
</html>

CSS

body {
  max-width: 100vw;
  max-height: 100vh;
}

#page_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#input_text {
  width: 50%;
  margin-top: 1%;
  margin-bottom: 1%;
}

#output_text {
  width: 50%;
  margin-top: 1%;
}

JS

let input = document.getElementById("input_text");
let output = document.getElementById("output_text");

// Main logic
function rot13() {
  let str = input.textContent;
  let unicodes = [];
  let result = "";

for(let i = 0; i < str.length; i++) {
  if(str.charCodeAt(i) >= 0 && str.charCodeAt(i) <= 64) {
    unicodes.push(str.charCodeAt(i));
  } else if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 77) {
    unicodes.push(str.charCodeAt(i) + 13);
  } else if(str.charCodeAt(i) <= 90) {
    unicodes.push(str.charCodeAt(i) - 13);
  } 
}
for(let x = 0; x < unicodes.length; x++) {
    result += String.fromCharCode(unicodes[x]);
}
return output.textContent = result;
}

input.onchange = rot13;

Thanks for reading :)

Upvotes: 1

Views: 118

Answers (1)

Blindman67
Blindman67

Reputation: 54039

  • Use input.value and output.value to get and set the text.
  • The event onchange only fires when you leave (blur) the textArea. Use onkeyup to update on every new character.
  • I assume you are only encoding characters below 91 (ie no lowercase characters)

Example

Side stepping the array and adding directly to the result

const input = document.getElementById("input_text");
const output = document.getElementById("output_text");
input.addEventListener("keyup",rot13);

function rot13() {
  const str = input.value;
  let result = "";
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    if (charCode >= 0 && charCode <= 64) {    
      result += str[i];
    } else if (charCode >= 65 && charCode <= 77) {
      result += String.fromCharCode(charCode + 13);
    } else if (charCode <= 90) {
      result += String.fromCharCode(charCode - 13);
    }
  }
  return output.value = result;
}
body {
  max-width: 100vw;
  max-height: 100vh;
}

#page_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#input_text {
  width: 50%;
  margin-top: 1%;
  margin-bottom: 1%;
}

#output_text {
  width: 50%;
  margin-top: 1%;
}
<div id='page_container'>
  <h1 id=main_title>ROT-13 Encryption Generator</h1>
  <label id='label_input' for='input_text'>What would you like to encrypt?</label>
  <textarea id='input_text' rows=5></textarea>
  <label id='label_output' for='output_text'>Here you go</label>
  <textarea id='output_text' rows=5></textarea>
</div>

Upvotes: 1

Related Questions