Javascript中的OnClick函數

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

您將需要重構您的代碼。您可以遍歷每個設置「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 
     }); 

Answer 2

要保存您的數據，您可以使用原始對象作爲地圖。

每個按鈕都需要有一個唯一的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>