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 :)
input.value
and output.value
to get and set the text.onchange
only fires when you leave (blur) the textArea
. Use onkeyup
to update on every new character.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.