我的“投票地图”程序需要一个“tweek”

My "vote map" program needs a "tweek"

本文关键字：tweek 一个 程序 地图 投票地图 我的      更新时间：2023-09-26

大家好，祝大家圣诞快乐！我正在制作一个"投票地图"程序，有点像《使命召唤》中的程序，只是作为学习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>

有几件事我会调整。 原因是不起作用的是，如果您投票给地图 2，当您再次投票给第一张地图时，没有else条件。

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

如果我理解得很好，正如你所说：

你注定只有一票，实际上只能"花"它 在一张地图上;地图的选择可以随时更改。

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

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

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

希望有用！

相关文章：