Problems with Caesar Cipher Formula involving ASCII Conversion

Question

After using the modifications from my last question, I ran into another problem using the formula for using a Caesar cipher: if letter x and shift n:

En(x) = (x + n) mod. 26;

However when I tried transferring this from my previous fully-bug-proof python program, it did not produce the same result. Instead of abcdefghijklmnopqrstuvwxyz -> defghijklmnopqrstuvwxyzabc, it produces abcdefghijklmnopqrstuvwxyz -> defghijklmnopklmnopqrstuvw. What is the problem with the JS code?

var shfBox = document.getElementById("shfBox");
var strBox = document.getElementById("strBox");
var button = document.getElementById("button");

button.addEventListener("click", function(){
  var orgstr = String(strBox.value);
  var orgshf = +Number(shfBox.value);
  var str = orgstr;
  var shf = orgshf;
  var output = "";

  for (var i=0; i < str.length; i++) {
    var asciiValue = str[i].charCodeAt();
    if (asciiValue >= 65 && asciiValue <= 77) {
      output += String.fromCharCode((asciiValue + shf - 65) % 26 + 65);

    } else if (asciiValue >= 78 && asciiValue <= 90) {
      output += String.fromCharCode((asciiValue + shf - 65) % 26 + 65);

    } else if (asciiValue >= 97 && asciiValue <= 109) {
      output += String.fromCharCode((asciiValue + shf - 97) % 26 + 97);

    } else if (asciiValue >= 110 && asciiValue <= 122) {
      output += String.fromCharCode((asciiValue - shf - 97) % 26 + 97);

    } else {
      output += str[i];
    }
  }
  
  document.getElementById("output").innerHTML = output;
  return output;
  return str;
});

*{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}


body {
  font-family: Courier;
}


#mainNav {
  font-family: Courier;
  display: flex;
  justify-content: space-between;
  padding: 0px 16px;
  position: fixed;
  width: 100%;
  top: 0px;
  background: #eee;
}

section:nth-of-type(1) {
  margin-top: 84px;
  font-family: Courier;
  height: 220px;
  padding: 16px;
  font-size: 17px;
}

section:nth-of-type(2) {
  font-family: Courier;
  height: 110px;
  padding: 16px;
  font-size: 17px;

}


section:nth-of-type(3) {
  font-family: Courier;
  height: 300px;
  padding: 16px;
  font-size: 17px;
}


footer {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: darkslategray;
  color: white;
}

#mainNav ul {
  list-style: none;
  display: flex;
  align-items: center;
  width: 400px;
  justify-content: space-around;

}

.button {
  background-color: lightblue;
  font-family: Courier;
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: skyblue;
}



#mainNav ul li a {
  text-decoration: none;
  font-weight: 500;
  color: #333;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <nav id="mainNav">
      <div class="logo">
        <header style="padding: 20px; font-size: 20px;">
          < Caesar Cipher >
        </header>
      </div>

      <ul>
        <li><a href="https://caesarcipherwebdesign--shiftcipher.repl.co/">Home</a></li>
        <li><a href="https://caesarcipher-about--shiftcipher.repl.co/">About</a></li>
        <li><a href="https://caesarcipher-process--shiftcipher.repl,co/">Process</a></li>
        <li><a href="https://caesarcipher-code--shiftcipher.repl.co/">Code</a></li>
      </ul>
    </nav>


    <section>
      a. Encrypted Phrase
      <pre>
      
      <textarea id="strBox" rows="10;" cols="50"></textarea>
      
      </pre>
    </section>

    <section>
      b. Shift Number
      <pre>
      
      <textarea id="shfBox" rows="2" cols="50"></textarea>
      
      </pre>
    </section>

    <section>
      c. Original Message
      <pre>
        
      <button class="button" id="button">Decipher</button>
      
      <p>Deciphered Code:</p>

      <p id="output"></p>
      </pre>
    </section>

    <footer>This is a flawed website.</footer>
    
    
    <script src="script.js"></script>
  </body>
</html>

Aioros Aioros · Accepted Answer · 2019-01-16T00:12:16

You have a - instead of a + in your last else if statement. Also, I'm not really sure why you have four different cases instead of just two, since they seem to do the same thing. Here's how it could work:

for (var i=0; i < str.length; i++) {
  var asciiValue = str[i].charCodeAt();
  if (asciiValue >= 65 && asciiValue <= 90) {
    output += String.fromCharCode((asciiValue + shf - 65) % 26 + 65);

  } else if (asciiValue >= 97 && asciiValue <= 122) {
    output += String.fromCharCode((asciiValue + shf - 97) % 26 + 97);

  } else {
    output += str[i];
  }
}

Problems with Caesar Cipher Formula involving ASCII Conversion

1 Answers