Question

我正在尝试使用HTML中的按钮进行跟踪。我有适当的Javascript代码，可以满足我的需求。但是，对于每个按钮，它都在顶部跟踪。我不确定在Javascript代码中需要更改哪些内容才能跟踪HTML中每个按钮的点击次数。

<div id="clientAssist">
    <div data-role="header">
        <h2>Client Assist</h2>
    </div>
    <div data-role="content">
        <div class="space">
            <form name="form1" method="post" action="">
                <p>
                    <label for="name">Client: </label>
                    <input type="text" name="name" id="name" placeholder="Client name">
                </p>
                <p>
                    <script type="text/javascript">
                        var clicks = 0;
                        function onClick() {
                        clicks += 1;
                        document.getElementById("clicks").innerHTML = clicks;
                        };
                    </script>
                    <button type="button" onClick="onClick()">30 min Tracker</button>
                <p>Clicks: <a id="clicks">0</a></p>
                </p>
            </form>
        </div>
    </div>
</div>
<div id="projects">
    <div data-role="header">
        <h2>Projects</h2>
    </div>
    <div data-role="content">
        <div class="space"  >
            <form name="form2" method="post" action="">
                <p>
                    <label for="name">Project: </label>
                    <input type="text" name="name" id="name" placeholder="Project name">
                </p>
                <p>
                    <script type="text/javascript">
                        var track = 0;
                        function onClick() {
                        track += 1;
                        document.getElementById("track").innerHTML = track;
                        };
                    </script>
                    <button type="button" onClick="onClick()">30 min Tracker</button>
                <p>Clicks: <a id="track">0</a></p>
                </p>
            </form>
        </div>
    </div>
</div>
<div id="myLearning">
    <div data-role="header">
        <h2>MyLearning</h2>
    </div>
    <div data-role="content">
        <div class="space"  >
            <form name="form3" method="post" action="">
                <p>
                    <label for="name">Description: </label>
                    <input type="text" name="name" id="name" placeholder="Description">
                </p>
                <p>
                    <script type="text/javascript">
                        var clicks = 0;
                        function onClick() {
                        clicks += 1;
                        document.getElementById("clicks").innerHTML = clicks;
                        };
                    </script>
                    <button type="button" onClick="onClick()">30 min Tracker</button>
                <p>Clicks: <a id="clicks">0</a></p>
                </p>
            </form>
        </div>
    </div>
</div>

Answer 1

要保存数据，您可以将原始对象用作地图。

每个按钮都需要有一个唯一ID才能知道点击了哪个按钮。

onClick功能可以将点击的按钮作为参数，并使用按钮ID将点击保存在地图中

// Map <string, number>
var clicks = {};


function onClick(element){
    var key = element.id;
    
    // Init the value if not here
    if (!clicks[key]){
         clicks[key] = 0;   
    }
    
    clicks[key]++;
    
    //Update the content of the next 'a' tag
    document.querySelector ('#'+key+" + p a").innerHTML = clicks[key];
}

<button type="button" id="client" onClick="onClick(this)">30 min Tracker</button>
<p>Clicks: <a class="clicks">0</a></p>

<button type="button" id="project" onClick="onClick(this)">30 min Tracker</button>
<p>Clicks: <a class="clicks">0</a></p>

Answer 2

您需要稍微重构一下代码。您可以循环遍历为每个元素设置“click”事件侦听器的元素。它需要使用闭包来实现，以便在返回外部函数之后存在所有事件侦听器。如果不这样做，只有最后一个事件监听器将保持绑定。

或者你可以使用jQuery。例如：

        // create list of cats
        for (var cat of cats){
            list.append("<li class=\"list\">" + cat.name +"</li>");
        };
        // on click hooks the event to all list elements 
        list.on("click", ".list", function(){
            // do something 
        });

Javascript中的OnClick函数

2 个答案: