Question

我一直在尝试调试我的JS程序，但无法解决该问题。我已经找到了错误的位置。我的两个变量没有从HTML表单获取输入。我已经检查了语法并尝试了所有我能想到的。当我console.log输入变量时，它们是一个空字符串。当我对程序中的输入进行硬编码时，它将按预期工作。问题似乎是从HTML文档中获取输入。这是我的HTML标记：

<form>
  <label for="message">Enter Your Message to be Encrypted:</label>
  <input type="text" name="message" id="msg">
  <label for="key">Enter Your Encryption Key:</label>
  <input type="text" name="key" placeholder="Value Between 1-26" id="encrypt-key">
  <button type="button">Encrypt</button>
</form>

这里有我的JS代码：

(function(){
    let aplhabet = ["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"];
    let msg = document.getElementById('msg').value;
    let encryptKey = document.getElementById('encrypt-key').value;
    //let msg = "ab ab";
    //let encryptKey = "1";
    let msgArray = msg.split(' ');
    let encryptedMsgArr = [];

    function encryptWord() {
       msgArray.forEach(word => {
            let i;
            let array = [];
            for (i = 0; i < word.length; i++) {
                var encryptedLetter;
                let letter = word.charAt(i);
                let aplhabetNum = aplhabet.indexOf(letter);
                let e = aplhabetNum + parseInt(encryptKey);
                if ( e > 25) {
                    e = e - 25;
                    encryptedLetter = aplhabet[e];
                } else {
                    encryptedLetter = aplhabet[e];
                }
                array.push(encryptedLetter);
            }
             let newWord = array.join('');
             encryptedMsgArr.push(newWord);
        });

        let encryptedMsg = encryptedMsgArr.join(' ');
        console.log(msg);
        alert(`The encrypted message is "${encryptedMsg}" and the decryption key is ${encryptKey}.`)

    }

    document.querySelector('button').addEventListener('click', encryptWord);
})()

在此先感谢大家的帮助！

Answer 1

那是因为您要为变量msg，encryptKey和msgArray的值外部分配值。这意味着它们的值是在运行时（在评估您的IIFE时）分配的，而不是在单击按钮时分配的。

只需将这三个let声明/赋值移动到函数本身中即可解决问题：

(function() {
  let aplhabet = ["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"];
  let encryptedMsgArr = [];

  function encryptWord() {

    // These three variables have been moved into the function
    let msg = document.getElementById('msg').value;
    let msgArray = msg.split(' ');
    let encryptKey = document.getElementById('encrypt-key').value;

    msgArray.forEach(word => {
      let i;
      let array = [];
      for (i = 0; i < word.length; i++) {
        var encryptedLetter;
        let letter = word.charAt(i);
        let aplhabetNum = aplhabet.indexOf(letter);
        let e = aplhabetNum + parseInt(encryptKey);
        if (e > 25) {
          e = e - 25;
          encryptedLetter = aplhabet[e];
        } else {
          encryptedLetter = aplhabet[e];
        }
        array.push(encryptedLetter);
      }
      let newWord = array.join('');
      encryptedMsgArr.push(newWord);
    });

    let encryptedMsg = encryptedMsgArr.join(' ');
    console.log(msg);
    console.log(`The encrypted message is "${encryptedMsg}" and the decryption key is ${encryptKey}.`)

  }

  document.querySelector('button').addEventListener('click', encryptWord);
})()

<form>
  <label for="message">Enter Your Message to be Encrypted:</label>
  <input type="text" name="message" id="msg">
  <label for="key">Enter Your Encryption Key:</label>
  <input type="text" name="key" placeholder="Value Between 1-26" id="encrypt-key">
  <button type="button">Encrypt</button>
</form>

获取输入值问题JavaScript

1 个答案: