过程代码的意外输出值

unexpected output value from procedural code

本文关键字：输出意外代码过程更新时间：2023-09-26

我有这段javascript不能工作。它应该接受用户输入并将其存储到玩家输入变量中。然后，它拆分返回的字符串并将其拆分为一个数组，然后通过oc()函数将其转换为对象。最后，函数analyzeUserInput在输入对象中查找关键字，并相应地将文本放入称为text的段落元素中。在这个例子中，如果用户输入"slash"、"poke"、"slice"、"hack"等单词，那么段落元素应该显示"你造成了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>

        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!";
              }
           }
        }