javascript- Caesar Cypher

<!DOCTYPE html>

		<link rel="stylesheet" href="style.css" type="text/css"/>
		<link href="|Fontdiner+Swanky" rel="stylesheet">
		<title> Create your own story </title>


		<h1>A ROT13 Encoder </h1>
		<p> About ROT13 ... </p>

		<div id =" input_area ">
			<textarea rows ="1" cols ="50" autofocus id ="message"style="height:20px;"> Type your sooper sekret message here </textarea>
			<p>Choose your cypher</p>
				<option value="Cypher1">Cypher 1</option>
				<option value="Cypher2">Cypher 2</option>
				<option value="Cypher3">Cypher 3</option>
				<option value="Cypher4">Cypher 4</option>
			<button type ="button" onclick ="encode()" id ="encode_button"> Encodify everything </button >
		</div >

		<div id ="output_area">
			 <p>This is your encoded message : <br/>
			 <div id ="output" ></div >
		<script type=" text/javascript" src="rot13.js"></script>


				font-family: 'Fontdiner Swanky', cursive;


				font-family: 'Crafty Girls', cursive;

				padding:30px 250px 0px 150px;
				font-family: 'Fontdiner Swanky', cursive;

textarea {

border :1 px solid #999999;
width :90%;
margin :5 px 0;


function encode()
	var plain_text = document.getElementById("message").value;
	var cypher_text=[];
	var alphabet=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']

	for(var idx=0; idx<plain_text.length; idx ++)
		input = alphabet.indexOf(plain_text[idx]);
		if(input == -1 )
			cypher_text.push(plain_text[idx]) ;

		else if(val="Cypher1")
			var coded1 = (input+13)%26;
			var letter1 = alphabet[coded1];
		else if(val="Cypher2")
			var coded2 = (input+15)%26;
			var letter2 = alphabet[coded2];
		else if(val="Cypher3")
			var coded3 = (input+17)%26;
			var letter3 = alphabet[coded3];
			var coded4 = (input+20)%26;
			var letter4 = alphabet[coded4];

	document.getElementById("output").innerHTML = cypher_text.join("");


Hello everyone!

How can I get the corresponding results depending on the options that user chose from the dropdown list? It seems like just the first option (Cypher1) works.

I’ll give you a hint


1 Like

Hi @crixi and welcome,

First of all, it’d be a good idea to put your code in, for example, a CodePen like this:

That way we can look at your code in a bit more comfortable way.

Aside from that, did the hit from @ajoslin103 help you out?

1 Like

buff, just got into JavaScript last week and I am still super new… I know what != is used for but can’t find a way to add it into the code…  :s

Thank you mpboom for your suggestion! I will definitely use it to make everyone’s life easier :smiley: still working on this Cypher

An easier version of the code based on @mpboom advice. This way will be easier for everyone! Please@mpboom and @ajoslin103 , help! I have no clue how to continue.

The earlier version above is “closer” than what you published in the pen.

Here is my hint: review the difference between assignment and comparison operators.

Thanks for posting it into a CodePen!

First of all, else if (“Cypher 1”) won’t work. A condition will “execute” when it evaluates to  true. You will have to compare the string to something, like this:  myVariable == “Cypher 1”.

Also take a look at the hints from @fire-eggs and other contributors!