实现DOM和JS将textarea输入转换成textarea输出框

Question

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.我正在尝试实现我在完成 FreeCodeCamp 的 Javascript 课程时创建的程序，我正在尝试使用 rot13 加密函数将 html textarea 框中的输入文本转换为输出 textarea 框中的更改字符串。 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.这两个框的 ID 分别为 input_text 和 output_text。

HTML 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 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 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 :)谢谢阅读：）

Answer 1

Use input.value and output.value to get and set the text.使用input.value和output.value来获取和设置文本。
The event onchange only fires when you leave (blur) the textArea .事件onchange仅在您离开（模糊） textArea 。 Use onkeyup to update on every new character.使用onkeyup更新每个新角色。
I assume you are only encoding characters below 91 (ie no lowercase characters)我假设您只对 91 以下的字符进行编码（即没有小写字符）

Example例子

Side stepping the array and adding directly to the result侧面步进数组并直接添加到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>

实现DOM和JS将textarea输入转换成textarea输出框

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-01-16 07:16:09

Example例子

实现DOM和JS将textarea输入转换成textarea输出框

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-01-16 07:16:09

Example例子

解决方案1
1 已采纳 2020-01-16 07:16:09