javascript - 带 HTML 的 JS 加密

Question

这应该将编码文本添加到 HTML 但似乎不起作用。

<script>
var i=0,j=0,k=0;
var letters=["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"];
function gibberish(string, list) {
document.innerHTML +="<p>";
for(var j=0;j<string.length;j++){
document.innerHTML += letters[(letters.indexOf(string.charAt(k))*list[(j%8)]+list[((j+1)%8)])%8];
k++;
}
document.innerHTML += "</p>";
}
var array = [];
var ptxt;
for(i=1;i<9;i++) {
array.push(prompt("enter a number (less than 10 preferably!)"));
}
ptxt = prompt("ok now enter a string");
gibberish(ptxt,array);
</script>

我做错了什么，等等？

Answer 1

文档没有 innerHTML属性(property)。您必须在其中选择一个元素 - 也许是 document.body .您也不应该连接不平衡的标签 - 准备好时立即连接所有平衡的 HTML 字符串:

var i = 0,
  j = 0,
  k = 0;
var letters = ["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"];

function gibberish(string, list) {
  let str = "<p>";
  for (var j = 0; j < string.length; j++) {
    str += letters[(letters.indexOf(string.charAt(k)) * list[(j % 8)] + list[((j + 1) % 8)]) % 8];
    k++;
  }
  document.body.innerHTML += str + "</p>";
}
var array = [];
var ptxt;
for (i = 1; i < 9; i++) {
  array.push(prompt("enter a number (less than 10 preferably!)"));
}
ptxt = prompt("ok now enter a string");
gibberish(ptxt, array);

但与 innerHTML 连接一个元素的通常是一个坏主意 - 它会强制重新解析整个容器，并会破坏容器内部可能包含的任何监听器。为了避免这些问题，最好创建一个 <p>并使用 appendChild相反。

您还可以创建 letters通过迭代关键代码来减少重复排列。

最好确保输入的数字确实是数字 - 您可以使用 do - while循环验证它们:

const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(97 + i));
function gibberish(string, list) {
  let k = 0;
  const p = document.createElement('p');
  for (let j = 0; j < string.length; j++) {
    p.textContent += letters[(letters.indexOf(string.charAt(k)) * list[(j % 8)] + list[((j + 1) % 8)]) % 8];
    k++;
  }
  document.body.appendChild(p);
}
var array = [];
for (let i = 1; i < 9; i++) {
  let num = null;
  do {
    prompt("enter a number (less than 10 preferably!)");
  } while (num === null);
  array.push(num);
}
gibberish(prompt("ok now enter a string"), array);