Question

正如标题所说，我正在做一个小游戏，但它没有猜到这个词，我不知道为什么。我添加了一个单词，所以人们不得不猜测它，使用字母，如果字母等于单词上的任何字母，它将替换_。

<!Doctype html>
<html>
<head>
    <title>Story</title>
    <style>
        /*body {
            font-family: Calibri;
            font-size: 13.5pt;
            margin-left: 5px;
            color: black;
        }*/

        #aa{
            border: 1px solid black;
        }

        /*.in2{
            width: 300px;
            height: 630px;
            border: 0px solid white;
            background-color: white;
            color: white;
            font-family: Arial;
            font-size: 25pt;
        }*/
    </style>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        var word = "" //word variable
        var wLength = 0 //word length variable
        var dummy = "" //letter guessed
        var dm = new Array(26)


        $(document).ready(function(){
            $("input.in2").hide()
        })

        $(document).ready(function(){
            $("input.bi2").hide()
        })

        function doGetWord(){
            var word = F.gword.value;
            var wLength = word.length;
            for(var i = 0; i < wLength; i++){
                document.getElementById("dword").innerHTML += "_ "
            }
            $("input.wordi").hide()
            $("input.bi").hide()
            $("input.in2").show()
            $("input.bi2").show()
        }

        function doGuess(){
            dummy = F.t.value
            if(dummy.length > 1){
                dummy = ""
                F.t.value = ""
            }
            else{
                F.t.value = ""
                alp = ["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"];
                dd = dummy.toString()
                window["cl" + dd]
                if(window["cl" + dd] == false){
                    alert("Letter already used, please try again with another letter")
                    dummy = ""
                    F.t.value = ""
                }
                else{
                    window["cl" + dd] = false
                    F.t.value = ""
                    doGuessWord();
                }
            }
        }

        function doGuessWord(){
            ws = new Array(wLength);
            for(i = 0; i <= wLength; i++){
                ws[i] = word.charAt(i)
                if(dummy == ws[i]){
                    document.getElementById("dword").value.charAt(i) = dummy
                }
            }

        }
    </script>
</head>
<body>
    <form name="F">
        <input type="text" name="gword" class="wordi">
        <input type="text" name="t" class="in2">
        <input type="button" name="b" value="do" onclick="doGetWord()" class="bi">
        <input type="button" name="b2" value="do" onclick="doGuess()" class="bi2">
        <div id="dword"></div>
    </form>
</body>
</html>

你能帮我弄清楚错误是什么吗？我无法找到它，但我认为它与document.getElementById("dword").value.charAt(i) = dummy有关。在此先感谢!!

Answer 1

此处变量之前您不需要var

function doGetWord(){
            var word = F.gword.value;
            var wLength = word.length;

因为想法是将这些值保存在父函数的范围内。你可以替换像这样的字母

const letters = document.getElementById("dword").textContent.split('');
letters[i] = dummy;
document.getElementById("dword").textContent = letters.join('');

您正在使用错误的变量名称和许多全局变量，这可能是一个很好的做法。我建议你阅读一本关于通用编程的书，比如https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670和javascript更具体的内容（以获得范围的概念）https://www.manning.com/books/secrets-of-the-javascript-ninja

＆＃13;

    <!DOCTYPE html>
    <html>

      <head>
        <title>Story</title>
        <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <style>
            /*body {
                font-family: Calibri;
                font-size: 13.5pt;
                margin-left: 5px;
                color: black;
            }*/

            #aa{
                border: 1px solid black;
            }

            /*.in2{
                width: 300px;
                height: 630px;
                border: 0px solid white;
                background-color: white;
                color: white;
                font-family: Arial;
                font-size: 25pt;
            }*/
        </style>
        <script src="jquery-3.2.1.js"></script>
        <script type="text/javascript">
            var word = "" //word variable
            var wLength = 0 //word length variable
            var dummy = "" //letter guessed
            var dm = new Array(26)


            $(document).ready(function(){
                $("input.in2").hide()
            })

            $(document).ready(function(){
                $("input.bi2").hide()
            })

            function doGetWord(){
                word = F.gword.value;
                wLength = word.length;
                for(var i = 0; i < wLength; i++){
                    document.getElementById("dword").innerHTML += "_ "
                }
                $("input.wordi").hide()
                $("input.bi").hide()
                $("input.in2").show()
                $("input.bi2").show()
            }

            function doGuess(){
                dummy = F.t.value
                if(dummy.length > 1){
                    dummy = ""
                    F.t.value = ""
                }
                else{
                    F.t.value = ""
                    alp = ["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"];
                    dd = dummy.toString()
                    window["cl" + dd]
                    if(window["cl" + dd] == false){
                        alert("Letter already used, please try again with another letter")
                        dummy = ""
                        F.t.value = ""
                    }
                    else{
                        window["cl" + dd] = false
                        F.t.value = ""
                        doGuessWord();
                    }
                }
            }

            function doGuessWord(){
                const letters = document.getElementById("dword").textContent.split(' ');
                for(i = 0; i < wLength; i++){
                    if(dummy === word.charAt(i)) {
                        letters[i] = dummy;
                    }
                }
                document.getElementById("dword").textContent = letters.join(' ');
            }
        </script>
      </head>

      <body>
        <form name="F">
          <input type="text" name="gword" class="wordi" />
          <input type="text" name="t" class="in2" />
          <input type="button" name="b" value="do" onclick="doGetWord()" class="bi" />
          <input type="button" name="b2" value="do" onclick="doGuess()" class="bi2" />
          <div id="dword"></div>
        </form>
      </body>

    </html>

＆＃13;

Answer 2

以下是您的代码的一些提示（以及其他内容）：

使用分号总是更好（如zfrisch所述）。
您不需要多个$(document).ready(function() { .. })。
String是不可变的，因此您无法直接更改它们。您必须先将它们转换为char数组（如Bsalex答案中所示）。
不要声明与全局变量具有相同名称的局部变量，因为本地变量将隐藏全局变量。
要阅读div元素的文字内容，请使用其textContent属性而不是value。（见Bsalex答案）
不要在没有var / let / const关键字的情况下声明局部变量（如此ws = new Array(wLength)），否则它将成为全局变量。

快乐的编码！

如何用js中的字母猜一个字

2 个答案: