Question

大家好，祝大家圣诞快乐！我正在制作一个“投票地图”计划，有点像使用Call of Duty JUST 作为学习javascript的练习。

它目前正如我原本希望的那样，但我想更进一步。目前，如果您在下面运行我的程序，您将看到有两个按钮，其中包含不同的地图。你只需要有一票，并且只能在一张地图上“花”它;允许随时更改地图的选择。

如果点击地图1，则投票会增加1，但如果再次点击则不会再增加。如果单击地图2，则投票会增加1，但如果再次单击，则不会再增加。

但这仅适用一次。例如，我按下地图1，然后按地图2;这很有效，但是当我再次尝试点击地图1时，它不起作用。

请记住我刚开始使用JavaScript;我认为这对练习来说是个好主意，因为它在视频游戏中很常见。

感谢您的帮助：D。

  <html>
    <head>
        <link rel="stylesheet" type="text/css" href="mycss.css">
    </head>
    <body>
        <p><strong><i>Vote for your preferred map.</i></strong></p>
        <button id="map1" onclick="addVotes()">Forest Map </button>
        <button id="map2" onclick="addVotes2()">City Map</button>
        <p id="votesForMap1"></p>
        <p id="votesForMap2"></p>

        <script>
            var $num_of_votes = 0;
            var clicks_for_map_1 = 0;
            var clicks_for_map_2 = 0;
            var map1votes = 0;
            var map2votes = 0;
            document.getElementById("votesForMap1").innerHTML = map1votes;
            document.getElementById("votesForMap2").innerHTML = map2votes;

            var addVotes = function() {
                if (clicks_for_map_2 === 0) {
                    document.getElementById("votesForMap1").innerHTML = map1votes + 1;
                    if (votesForMap2 === 1) {
                        document.getElementById("votesForMap2").innerHTML = map2votes - 1;
                    }
                    clicks_for_map_2 = clicks_for_map_2 + 1;
                    $num_of_votes = $num_of_votes + 1;
                    if ($num_of_votes === 1) {
                        map1votes = map1votes + 1;
                        document.getElementById("votesForMap1").innerHTML = map1votes;
                    } 
                }
            }

            var addVotes2 = function() {
                if (clicks_for_map_1 === 0) {
                    document.getElementById("votesForMap2").innerHTML = map2votes + 1;
                    if (votesForMap1 === 1) {
                        document.getElementById("votesForMap2").innerHTML = map2votes - 1;
                    }
                    document.getElementById("votesForMap1").innerHTML = map1votes - 1;
                    clicks_for_map_1 = clicks_for_map_1 + 1;
                    $num_of_votes = $num_of_votes + 1;
                    if ($num_of_votes === 1) {
                        map2votes = map2votes + 1;
                        document.getElementById("votesForMap2").innerHTML = map2votes
                    }
                }
            }
        </script>
    </body>
    </html>

Answer 1

如果我理解得很好，就像你说的那样：

你只需要投一票，而且只能“花”它在一张地图上;允许随时更改地图的选择。

在这种情况下，您应该使用单选按钮。

但是，如果你想积累所有用户完成的投票，你应该考虑使用例如Ajax来检索和更新服务器中的投票计数。

如果我弄错了，请纠正我。

希望它有用！

Answer 2

我会调整一些事情。原因是无效的是，如果您投票支持地图2，那么当您再次投票给第一张地图时，没有else条件。

我建议你制作一个投票功能并引用点击的目标元素。这将允许您将逻辑保持在一起并且更紧凑。您还可以添加更多地图，而无需一遍又一遍地复制和粘贴相同的功能。

我的＃34;投票地图＆＃34;程序需要一个＆＃34; tweek＆＃34;

2 个答案: