Question

此代码的目的是检索一组随机数字和相关的帧编号并将它们传递给本地存储，一旦检索，它们将被设置在＆＃34;帧编号中的另一个位置。框

＆＃13;

function myFunction() {
                var x = Math.floor((Math.random() * 10) + 1);
                document.getElementById("Pins").innerHTML = x;
            }
            var clicks = 0;
            function onClick() {
                clicks += 1;
                if (clicks > 10) {
                    clicks = 0;
                }
                document.getElementById("clicks").innerHTML = clicks;
            };
            if (typeof (Storage) !== "undefined") {
                if (('#clicks') == 1) {
                    (localStorage.setItem("#frame1", "#clicks"))
                    document.getElementById("frame1").innerHTML = localStorage.getItem("#frame1");
                }
            }
            else if (('#clicks') == 2) {
                (localStorage.setItem("#frame2", "#clicks"))
                document.getElementById("frame2").innerHTML = localStorage.getItem("#frame2");
            }

＆＃13;

.framebox {
  border: 1px dashed black;
}

＆＃13;

    
        <button onclick="myFunction(), onClick()">Roll</button>
        <div class="row">
            <div class="col-xs-12">
                Pins Hit:
            </div>
            <p id="Pins"></p>
            <div class="col-xs-12"> Frame Number</div>
            <div id="clicks"></div>
            <br />
            <h5 class="text-center">Frames</h5>
            <ul>
                <li class="framebox col-xs-1" id="frame1" name="Frame 1"></li>
                <li class="framebox col-xs-1" id="frame2" name="Frame 2"></li>
                <li class="framebox col-xs-1" id="frame3" name="Frame 3"></li>
                <li class="framebox col-xs-1" id="frame4" name="Frame 4"></li>
                <li class="framebox col-xs-1" id="frame5" name="Frame 5"></li>
                <li class="framebox col-xs-1" id="frame6" name="Frame 6"></li>
                <li class="framebox col-xs-1" id="frame7" name="Frame 7"></li>
                <li class="framebox col-xs-1" id="frame8" name="Frame 8"></li>
                <li class="framebox col-xs-1" id="frame9" name="Frame 9"></li>
                <li class="framebox col-xs-1" id="frame10" name="Frame 10"></li>
            </ul>
        </div>

＆＃13;

我无法让帧返回正确的数字和分数，任何帮助都表示赞赏

Answer 1

您正在设置并获取字符串#clicks，而不是点击次数，代码更改，

if (typeof (Storage) !== "undefined") {
        if (clicks == 1) {
            localStorage.setItem("#frame1", clicks);
            document.getElementById("frame1").innerHTML = localStorage.getItem("#frame1");
        }
    }
    else if (clicks == 2) {
        localStorage.setItem("#frame2", clicks);
        document.getElementById("frame2").innerHTML = localStorage.getItem("#frame2");
    }

您应该存储点击变量，而不是存储字符串 #clicks ，而是将其用于比较。

编辑：您无法看到点击次数，因为它既不等于1也不是2.将else块设置如下，查看控制台中的点击次数，

if (typeof (Storage) !== "undefined") {
        if (clicks == 1) {
            localStorage.setItem("#frame1", clicks);
            document.getElementById("frame1").innerHTML = localStorage.getItem("#frame1");
        }
    }
    else if (clicks == 2) {
        localStorage.setItem("#frame2", clicks);
        document.getElementById("frame2").innerHTML = localStorage.getItem("#frame2");
    }
else{
    console.log(clicks);
}

Answer 2

   <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style>
        .framebox {
            border: 1px dashed black;
        }
    </style>


    <button onclick="myFunction();onClick()">Roll</button>
    <div class="row">
        <div class="col-xs-12">
            Pins Hit:
        </div>
        <p id="Pins"></p>
        <div class="col-xs-12"> Frame Number</div>
        <div id="clicks"></div>
        <br />
        <h5 class="text-center">Frames</h5>
        <ul>
            <li class="framebox col-xs-1" id="frame1" name="Frame 1"></li>
            <li class="framebox col-xs-1" id="frame2" name="Frame 2"></li>
            <li class="framebox col-xs-1" id="frame3" name="Frame 3"></li>
            <li class="framebox col-xs-1" id="frame4" name="Frame 4"></li>
            <li class="framebox col-xs-1" id="frame5" name="Frame 5"></li>
            <li class="framebox col-xs-1" id="frame6" name="Frame 6"></li>
            <li class="framebox col-xs-1" id="frame7" name="Frame 7"></li>
            <li class="framebox col-xs-1" id="frame8" name="Frame 8"></li>
            <li class="framebox col-xs-1" id="frame9" name="Frame 9"></li>
            <li class="framebox col-xs-1" id="frame10" name="Frame 10"></li>
        </ul>
    </div>






    <script>

        function myFunction() {
            var x = Math.floor((Math.random() * 10) + 1);
            document.getElementById("Pins").innerHTML = x;
        }
        var clicks = 0;
        function onClick() {
            clicks += 1;
            if (clicks > 10) {
                clicks = 0;
            }
            document.getElementById("clicks").innerHTML = clicks;

        if (typeof (Storage) !== "undefined") {
            if ((clicks) == 1) {
                (localStorage.setItem("#frame1", clicks))
                document.getElementById("frame1").innerHTML = localStorage.getItem("#frame1");
            }

        else if (clicks == 2) {
            (localStorage.setItem("#frame2", clicks))
            document.getElementById("frame2").innerHTML = localStorage.getItem("#frame2");
        }
        }
        }
    </script>
</body>
</html>

尝试上面的代码给出输出

尝试以列表格式设置和检索本地存储变量

2 个答案: