Hei.
I have made a JavaScript function that will convert input (UPPER CASE LETTERS) using ROT13. Problem is that the output will not show as a “paragraph” on the .html page when the letters are submittet to the function. All files is saved in the same folder and using XAMP for testing.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caesars Cipher Converter</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Caesars Cipher Converter (freeCodeCamp project for JavaScript)</h1>
<h3>Description</h3>
<p> <!-- Add an anchor/link to wikipedia in the description-->
Input letters into the input field and press submit. The JavaScript code that I have
made will convert the letters using <strong><a href="https://en.wikipedia.org/wiki/ROT13">ROT13.</a></strong>
</p>
<p>
NB: Only uppercase letters are allowed.
</p>
<form>
<label for="Input">Input</label>
<input type="text" id="input" required>
<!-- Adding the submit putton that activate the rot 13 converter javascript function when clicked -->
<button type="button" onclick="rot13()">Submit</button>
</form>
<p id="output"></p>
<!-- Here comes the external javascript import -->
<script src="ROT13_converter.js"></script>
</body>
</html>
JavaScript code:
var alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M'];
var oppAlph = ['N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
function rot13() {
var str = document.getElementById("input").value;
var newStr = str.split("");
for (let i = 0; i < newStr.length; i++) {
for (let j = 0; j < alphabet.length; j++) {
if (newStr[i] === alphabet[j]) {
newStr[i] = oppAlph[j];
} else if (newStr[i] === oppAlph[j]) {
newStr[i] = alphabet[j];
}
}
}
document.getElementById("output").innerHTML = newStr.join("");
}
Here is a similar project i made just with roman number convertion (I want the same ouput):
Preview (Roman number convertion)
