程序代码的意外输出值

Question

我有这段无法工作的 javascript。它应该接受用户输入并将其存储到玩家输入变量中。然后，它拆分返回的字符串并将其拆分为一个数组，然后由函数 oc() 将其转换为一个对象。最后，analyzeUserInput 函数在输入对象中查找关键字，并将文本相应地放入称为文本的段落元素中。在这个例子中，如果用户输入斜线、戳、切片、黑客等，并且“剑”这个词，段落元素应该说“你做了 4 次伤害！”但事实并非如此。这是代码：

<!DOCTYPE html>
<html>
    <body>
        <p>"oh no theres a monster whatchya gonna do?"</p>
        <input id="plyrInput" type="text" />
        <button onclick="analyzeUserInput()">Try it</button>
        <p id="text"></p>
        <script>
            var plyrInput;
            var plyrInputArray;
            var plyrInputAnalysis;

            function oc() {
                plyrInputArray = plyrInput.split(' ');
                var plyrInputObj = {};
                for (var i = 0; i < plyrInputArray.length; ++i) {
                    plyrInputObj[plyrInputArray[i]] = ' ';
                }
                return plyrInputObj;
            }

            function analyzeUserInput() {
                plyrInput = document.getElementById("plyrInput").text;
                oc();
                if (plyrInputAnalysis in oc(['use', 'slash', 'hack', 'wield', 'slice', 'sever', 'dismember', 'poke', 'cripple', 'maim', 'mutilate', 'chop', 'rend']) && plyrInputAnalysis in oc(['sword'])) {
                    document.getElementById("text").innerHTML = "You did 4 damage with your sword!";
                }
            }
        </script>
    </body>
</html>

Answer 1

        var plyrInput;
        var plyrInputArray;
        var plyrInputAnalysis;

        function oc() {
            plyrInputArray = plyrInput.split(' ');
            var plyrInputObj = {};
            for (var i = 0; i < plyrInputArray.length; ++i) {
                //storing these values in an object being blank is not really needed at all!
                //plyrInputObj[plyrInputArray[i]] = ' ';
                plyrInputObj[i] = plyrInputArray[i]; //acceptable or use the array itself!
            }
            return plyrInputObj;
        }

        function analyzeUserInput() {
            //plyrInput = document.getElementById("plyrInput").text;//no such property as text
            plyrInput = document.getElementById("plyrInput").value;
            //you ran this function without storing it so we can't use it
            //oc();
            var plyrAction = oc();
            //you call an undefined variable `plyrInputAnalysis`. So what are we going to do with it?
            if (plyrInputAnalysis in oc(['use', 'slash', 'hack', 'wield', 'slice', 'sever', 'dismember', 'poke', 'cripple', 'maim', 'mutilate', 'chop', 'rend']) && plyrInputAnalysis in oc(['sword'])) {
                document.getElementById("text").innerHTML = "You did 4 damage with your sword!";
            }
        }

现在进行修复：

        var plyrInput;
        var plyrInputArray;
        var plyrInputAnalysis;
        //added an acitonList for later usage for yourself
        var actionList = {
          'use':4,
          'slash':4,
          'hack':4,
          'wield':4,
          'slice':4,
          'sever':4,
          'dismember':4,
          'poke':4,
          'cripple':4,
          'maim':4,
          'mutilate':4,
          'chop':4,
          'rend':4
        };
        function oc() {
            plyrInputArray = plyrInput.split(' ');
            var plyrInputObj = {};
            for (var i = 0; i < plyrInputArray.length; ++i) {
                plyrInputObj[i] = plyrInputArray[i];
            }
            return plyrInputObj;
        }

        function analyzeUserInput() {
            plyrInput = document.getElementById("plyrInput").value;
            var plyrAction = oc(); //cached the returned value from oc
           for(var item in plyrAction){ //looping through the plyrActions object
              if(actionList[plyrAction[item]]){ //if there is a plyrAction that matches the actionsList we'll continue.
                  document.getElementById("text").innerHTML = "You did "+actionList[plyrAction[item]]+" damage with your sword!";
              }
           }
        }

虽然这看起来比实际需要的复杂得多，但我放弃了您原来的方法，您可以为 RPG 游戏创建此代码的更好实例，不过最好查看 IIFE 来包装它并最小化大量代码而不是多个函数。

例如

        function analyzeUserInput() {
            plyrInput = document.getElementById("plyrInput").value;
            var plyrAction = plyrInput.split(' ');
            var plyrInputObj = {};
            for (var i = 0; i < plyrAction.length; ++i) {
                plyrInputObj[i] = plyrAction[i];
            }
           for(var item in plyrInputObj ){ 
              if(actionList[plyrInputObj[item]]){ 
                  document.getElementById("text").innerHTML = "You did "+actionList[plyrInputObj[item]]+" damage with your sword!";
              }
           }
        }