Question

我的html代码存在问题，我试图从用户那里获得用于我的函数的输入，但我尝试过的所有方法都返回一个空字符串而不是我输入的内容。我已经查看了有关此问题的堆栈溢出的其他问题，但是没有一个解决方案解决了我的问题，我想知道是否有人可以告诉我我做错了什么。

var myPlaintext = document.getElementById("mPlaintext").value;
var myKey = document.getElementById("mKey").value;
let keys = [];
let string = "";
function encrypt(plaintext, key) {
  let encrypted = CryptoJS.AES.encrypt(plaintext, key);
  return encrypted;
}
function decrypt(encrypted, key) {
  let decrypted = CryptoJS.AES.decrypt(encrypted, key);
  return decrypted;
}
function encryptThis() {
  let encrypted = encrypt(myPlaintext, myKey);
  document.getElementById("encryptedText").innerHTML = encrypted;
}
function encryptAll() {
  document.getElementById("table1").innerHTML = string;
}
function AlertTest() {
  alert(myPlaintext);
}
function processData(myData) {
  string += "<tr><th>Key</th><th>Encrypted Message</th><th>Decrypted 
Message</th><th>Original Message</th></tr>";
  for (i in myData) {
      let encrypted = encrypt(myPlaintext, myData[i].key);
      let decrypted = decrypt(encrypted, myData[i].key);
      keys[i] = myData[i].key;
      string += "<tr>";
    string += "<td>" + myData[i].key + "</td>";
    string += "<td>" + encrypted + "</td>";
    string += "<td>" + decrypted + "</td>";
    string += "<td>" + myPlaintext + "</td>";
    string += "</tr>";
  }
}
$(document).ready(function() {
  $.getJSON("http://danycabrera.com/csc130/proxy.php? 
 key=1wqnh5q6cthLz1lyHTF6sqQhYB7rca6RUGJy57y2EOgY&sheet=Sheet1", processData);
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="main">
        <form id="form" onsubmit="return false;">
            <label>Enter a string to encrypt</label>
            <br>
            <input type="text" id="mPlaintext" placeholder="Plaintext"/>   
        </form>
        <form>
            <label>Enter a a key to encrypt the string by</label>
            <br>
            <input type="text" id="mKey" placeholder="Key"/>
        </form>
        <button onclick="encryptThis()"> Encrypt your message</button>
        <div id="encryptedText"></div>
        <button onclick="AlertTest()">Alert Test</button>
        <button onclick="encryptAll()">Encrypt All</button>
        <table id="table1" border="1"></table>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
</body>
</html>

Answer 1

尝试下面的代码段，这是您想要的结果。

＆＃13;

var myPlaintext = document.getElementById("mPlaintext").value;
var myKey = document.getElementById("mKey").value;
let keys = [];
let string = "";
function encrypt(plaintext, key) {
  let encrypted = CryptoJS.AES.encrypt(plaintext, key);
  return encrypted;
}
function decrypt(encrypted, key) {
  let decrypted = CryptoJS.AES.decrypt(encrypted, key);
  return decrypted;
}
function encryptThis() {
  let encrypted = encrypt(myPlaintext, myKey);
  document.getElementById("encryptedText").innerHTML = encrypted;
}
function encryptAll() {
  document.getElementById("table1").innerHTML = string;
}
function AlertTest() {
  alert(myPlaintext);
}
function processData(myData) {
  string += "<tr><th>Key</th><th>Encrypted Message</th><th>Decrypted Message</th><th>Original Message</th></tr>";
  for (i in myData) {
      let encrypted = encrypt(myPlaintext, myData[i].key);
      let decrypted = decrypt(encrypted, myData[i].key);
      keys[i] = myData[i].key;
      string += "<tr>";
    string += "<td>" + myData[i].key + "</td>";
    string += "<td>" + encrypted + "</td>";
    string += "<td>" + decrypted + "</td>";
    string += "<td>" + myPlaintext + "</td>";
    string += "</tr>";
  }
}
$(document).ready(function() {
  $.getJSON("http://danycabrera.com/csc130/proxy.php?key=1wqnh5q6cthLz1lyHTF6sqQhYB7rca6RUGJy57y2EOgY&sheet=Sheet1", processData);
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
<!--     <link rel="stylesheet" href="style.css"> -->
</head>
<body>
    <div id="main">
        <form id="form" onsubmit="return false;">
            <label>Enter a string to encrypt</label>
            <br>
            <input type="text" id="mPlaintext" placeholder="Plaintext"/>   
        </form>
        <form>
            <label>Enter a a key to encrypt the string by</label>
            <br>
            <input type="text" id="mKey" placeholder="Key"/>
        </form>
        <button onclick="encryptThis()"> Encrypt your message</button>
        <div id="encryptedText"></div>
        <button onclick="AlertTest()">Alert Test</button>
        <button onclick="encryptAll()">Encrypt All</button>
        <table id="table1" border="1"></table>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>    
<!--     <script src="script.js"></script> -->
</body>
</html>

＆＃13;

Answer 2

所以我找到了一个问题的答案，我将要离开这里以防其他有这个问题的人遇到这个问题。简短的回答是我在js文件加载开始时调用变量myPlaintext和myKey，它只是抓住输入中开始的空白空间。我已经通过创建一个函数来修复它，以获取输入并根据需要调用它

var myPlaintext = "";
var myKey = "";
let keys = [];
let string = "";
function getPlainKey() {
  myPlaintext = document.getElementById('mPlaintext').value;
  myKey = document.getElementById('mKey').value;
}
 function encrypt(plaintext, key) {
  let encrypted = CryptoJS.AES.encrypt(plaintext, key);
  return encrypted;
 }
 function decrypt(encrypted, key) {
  let decrypted = CryptoJS.AES.decrypt(encrypted, key);
  return decrypted;
 }
 function encryptThis() {
  getPlainKey();
  let encrypted = encrypt(myPlaintext, myKey);
  document.getElementById("encryptedText").innerHTML = encrypted;
}
function encryptAll() {
  getPlainKey();
  $.getJSON("http://danycabrera.com/csc130/proxy.php? 
  key=1wqnh5q6cthLz1lyHTF6sqQhYB7rca6RUGJy57y2EOgY&sheet=Sheet1", 
  processData);
}
function AlertTest() {
  getPlainKey();
  alert(myPlaintext);
}
function processData(myData) {
    getPlainKey();
    string += "<tr><th>Key</th><th>Encrypted Message</th><th>Decrypted 
    Message</th><th>Original Message</th></tr>";
    for (i in myData) {
      let encrypted = encrypt(myPlaintext, myData[i].key);
      let decrypted = decrypt(encrypted, myData[i].key);
      keys[i] = myData[i].key;
      string += "<tr>";
      string += "<td>" + myData[i].key + "</td>";
      string += "<td>" + encrypted + "</td>";
      string += "<td>" + decrypted + "</td>";
      string += "<td>" + myPlaintext + "</td>";
      string += "</tr>";
 }
  document.getElementById("table1").innerHTML = string;
}

Html输入返回一个空字符串

2 个答案: