2017-11-12 6 views
1

Ich mache eine Website in HTML5 und Javascript, die in einigen Klartext über textarea, wendet eine Caesar-Chiffre von 3, und sendet die Ausgabe an eine andere textarea.Caesar Cipher Website in HTML und Javascript produziert keine Ausgabe

Es produziert jedoch keine Ausgabe. Hier ist mein Code:

<!DOCTYPE html> 
    <html> 
    <body> 
    <script language="JavaScript"> 
    var x = document.getElementById("myTextArea").value; 

    function c_ciph(){ 
     for (var i = 0, len = x.length; i < len; i++) { 
     if (x[i] == x[i].toUpperCase()){ 
      var a = x[i].charCodeAt(0); 
      var e = ((a - 65 + 3) % 26) + 97; 
      var c = String.fromCharCode(e); 
     } 
     else if (x[i] == x[i].toLowerCase()){ 
      var a = x[i].charCodeAt(0); 
      var e = ((a - 97 + 3) % 26) + 97; 
      var c = String.fromCharCode(e); 
     } 
     } 
     document.getElementById('result').value = x; 
    } 


    </script> 
    <div> 
     <h1>Cipher and Leetspeak Converter</h1> 
     <p>Welcome to the cipher and leetspeak converter.</p> 
    </div> 

    <div> 
     <textarea id = "myTextArea" rows = "6" cols = "80"> 
     </textarea> 
     <p>Convert to:</p> 
    </div> 

    <div> 
    <form> 
     <input type="radio" name="codingStyle" value="caesar_cipher" onclick="c_ciph();"> Caesar Cipher <br> 
     <input type="radio" name="codingStyle" value="vigenere_cipher"> Vigenere Cipher<br> 
     <input type="radio" name="codingStyle" value="leetspeak"> Leetspeak 
    </form> 
    </div> 

    <div> 
     <button type="button">Convert</button> 
    </div> 

    <div> 
     <textarea id = "result" rows = "6" cols = "80"> 
     </textarea> 
    </div> 

    </body> 
    </html> 

Dies ist die Website:

enter image description here jedoch nichts zeigt im zweiten Textfeld, wenn "Caesar-Chiffre" geklickt wird.

Ich bin neu in Javascript und HTML, also bitte zeigen Sie so viele Fehler wie möglich.

EDIT 1: Der Ausgang erscheint in der 2. text area jetzt. Ich habe jedoch Probleme, den Wert von x zu ciphertext zu ändern. Es gibt denselben Wert aus. Siehe Bild hier: enter image description here

Statt Geek in der zweiten textarea, sollte es "iggm" sein. Bitte helfen.

+0

Der Browser bereits Fehler Sie in der Entwicklerkonsole berichten. – Pointy

+0

@pointy Welche Fehler? – toyotasupra

Antwort

1

Sie benötigen die

var x = document.getElementById("myTextArea").value; 

innerhalb der Funktion zu bewegen, so dass jedes Mal Funktion x aufgerufen wird, wird neuer Wert zugewiesen.

function c_ciph(){ 
     var x = document.getElementById("myTextArea").value; 

    for (var i = 0, len = x.length; i < len; i++) { 
    if (x[i] == x[i].toUpperCase()){ 
     var a = x[i].charCodeAt(0); 
     var e = ((a - 65 + 3) % 26) + 97; 
     var c = String.fromCharCode(e); 
    } 
    else if (x[i] == x[i].toLowerCase()){ 
     var a = x[i].charCodeAt(0); 
     var e = ((a - 97 + 3) % 26) + 97; 
     var c = String.fromCharCode(e); 
    } 
    } 
    document.getElementById('result').value = x; 
} 

Arbeitsbeispiel hier https://jsfiddle.net/vqsnmamy/2/

+0

Vielen Dank. Allerdings druckt es jetzt dasselbe anstelle des Chiffretextes. Ich weiß, dass der Verschlüsselungsalgorithmus korrekt ist, keine Notwendigkeit, das zu beheben, aber es gibt ein Problem mit dem Wert von "x". Kannst du mir damit helfen? – toyotasupra

+0

Sie speichern Ihr Ergebnis nicht und drucken "x" nur in der Ausgabe. Vielleicht ist das, was Sie suchen: 'https: // jsfiddle.net/vqsnmamy/3 /' –

+0

Ja, ich habe darauf hingewiesen. – toyotasupra