增加图像地图点击的变量计数答案

【问题标题】：Increasing variable count on imagemap click增加图像地图点击的变量计数
【发布时间】：2012-07-04 15:45:10
【问题描述】：

我有一个图像地图，想跟踪它在 javascript 中被点击的次数，但我不知道如何记录点击次数。

<p>
    <img src="image.png" alt="missing" width="396" height="376" border="0" usemap="#thatPageMap" />

    <map name="imageMap" id="thatPageMap">
        <area shape="poly" coords="0,376,-3,269,50,251,60,234,71,225,76,192,69,178,44,127,50,82,73,62,94,48,69,46,108,30,145,20,162,29,162,16,183,34,193,41,228,35,247,38,225,47,242,47,279,53,306,78,324,117,326,150,335,179,327,200,327,221,351,234,357,263,393,275,394,378" href="thatpage.com" alt="Refresh" />
    </map>
</p>

上面是图像映射，下面是javascript和带有计数ID的段落。

<script type="text/javascript">

    var count;

    document.getElementById("counted").innerHTML = "This has been clicked " + count + " times.";

</script>

<p id="counted"></p>

如何在每次单击图像地图时增加变量计数？

【问题讨论】：

addEventListener 然后去学习使用 jQuery 或类似的库来实现兼容性

标签： javascript html click imagemap

【解决方案1】：

例如这样：

<script type="text/javascript">
    var count = 0;
    function updateCounter( ) {
        count++;  
        document.getElementById("counted").innerHTML = "This has been clicked " + count + " times.";
    }
</script>

<p id="counted"></p>

<map name="imageMap" id="thatPageMap" onclick="updateCounter()">
    <area shape="poly" coords="0,376,-3,269,50,251,60,234,71,225,76,192,69,178,44,127,50,82,73,62,94,48,69,46,108,30,145,20,162,29,162,16,183,34,193,41,228,35,247,38,225,47,242,47,279,53,306,78,324,117,326,150,335,179,327,200,327,221,351,234,357,263,393,275,394,378" href="thatpage.com" alt="Refresh" />
</map>

【讨论】：

如此简单：P 非常感谢！该计数是对页面刷新次数的计数，使用 cookie 存储变量，可以完美运行。再次感谢！

【解决方案2】：

给你：http://jsfiddle.net/PUs9g/

【讨论】：

为什么需要 jQuery 来实现这个基本功能？

【解决方案3】：

创建一个函数来增加点击次数，然后从该区域的 onclick 中调用它。

<script type="text/javascript">

    var count;

    function clicked() {
        count = count + 1;
        document.getElementById("counted").innerHTML = "This has been clicked " + count + " times.";
   }



</script>


<p>
    <img src="image.png" alt="missing" width="396" height="376" border="0" usemap="#thatPageMap" />

    <map name="imageMap" id="thatPageMap">
        <area onclick="clicked();" shape="poly" coords="0,376,-3,269,50,251,60,234,71,225,76,192,69,178,44,127,50,82,73,62,94,48,69,46,108,30,145,20,162,29,162,16,183,34,193,41,228,35,247,38,225,47,242,47,279,53,306,78,324,117,326,150,335,179,327,200,327,221,351,234,357,263,393,275,394,378" href="thatpage.com" alt="Refresh" />
    </map>
</p>

或者将 onclick 添加到地图本身。但是，如果您要计算特定区域，请从那里调用它。

【讨论】：

第一次调用它将是undefined1，因为您没有将devault值添加到count变量。

【解决方案4】：

如果您在没有关键字 var 的情况下定义计数器，则它是一个全局变量。

你只需要改变

var count;

到

count;

【讨论】：

为什么需要将count 变量添加到全局范围？
你的解决方案更优雅;)