获取输入值问题的JavaScript

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>