javascript- Caesar Cypher

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" href="style.css" type="text/css"/>
		<link href="https://fonts.googleapis.com/css?family=Crafty+Girls|Fontdiner+Swanky" rel="stylesheet">
		<title> Create your own story </title>

	</head>
	<body>

		<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>
			<select>
				<option value="Cypher1">Cypher 1</option>
				<option value="Cypher2">Cypher 2</option>
				<option value="Cypher3">Cypher 3</option>
				<option value="Cypher4">Cypher 4</option>
			</select>
			<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 >
			 </p>
		</div>
		<script type=" text/javascript" src="rot13.js"></script>
	</body>
</html>

body{
	background-color:#FFB77B;
}

h1{
				text-align:center;
				padding-top:5%;
				padding-bottom:40px;
				font-family: 'Fontdiner Swanky', cursive;
				color:brown;
			}

			p{

				text-align:center;
				font-family: 'Crafty Girls', cursive;
				font-size:1.5em;
				letter-spacing:-0.5px;
			}

			h3{
				padding:30px 250px 0px 150px;
				font-family: 'Fontdiner Swanky', cursive;
				font-size:-0.5em;
			}

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];
			cypher_text.push(letter1);
		}
		else if(val="Cypher2")
		{
			var coded2 = (input+15)%26;
			var letter2 = alphabet[coded2];
			cypher_text.push(letter2);
		}
		else if(val="Cypher3")
		{
			var coded3 = (input+17)%26;
			var letter3 = alphabet[coded3];
			cypher_text.push(letter3);
		}
		else(val="Cypher4")
		{
			var coded4 = (input+20)%26;
			var letter4 = alphabet[coded4];
			cypher_text.push(letter4);
		}

	}
	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:

https://codepen.io/anon/pen/PVXPyW

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.

https://codepen.io/crixi/pen/pGGKvm

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!