document.getElementById.onClick不起作用（Javascript）

我的問題是：我正在計算所有下載次數。我通過每次點擊按鈕時向數據庫添加+1來實現這一點，然後我簡單地獲取數據庫值並顯示它。我嘗試了很多方法，但無論我做什麼下載都保持爲零。我更喜歡原始的javascript/html，因爲我不是那種先進的，我想以我理解的方式去做。document.getElementById.onClick不起作用（Javascript）

我也試過在身體和頭部，但不影響粘貼的腳本。

<div style="padding: 10px"> 
    <img src="http://localhost:3000/uploads/{{article.imgName}}" width="100%" style="margin-bottom: 15px"> 
    <p> 
     {{#each article.tags }} 
      <a class="btn btn-default btn-xs" 
       href="/tag/{{this}}">{{this}}</a> 
     {{/each}} 
    </p> 
    <small class="author"> 
     {{article.author.fullName}} 
    </small> 
    <footer> 
     <script type="text/javascript"> 
      var article = require("mongoose/lib/model.js"); 
      const downloadCount = function() { 
       article.downloads += 1; 
       article.save(); 
      } 
      document.getElementById('download').onClick = downloadCount; 
     </script> 

     <p><br>Views: {{article.views}} </p> 
     <p>Downloads: {{article.downloads}}</p> 
     <div class="pull-right"> 
      <a class="btn btn-default btn-sm" href="/">&laquo; Back</a> 
      <a id="download" class="btn btn-default btn-sm" href ="/uploads/{{article.imgName}}" download="{{article.imgName}}" onClick="downloadCount()">Download</a> 
      {{#if isUserAuthorized}} 
       <a class="btn btn-success btn-sm" 
        href="/article/edit/{{article.id}}">Edit</a> 
       <a class="btn btn-danger btn-sm" 
        href="/article/delete/{{article.id}}">Delete</a> 
      {{/if}} 
     </div> 
    </footer> 
</div>

來源

2016-11-23 Maximilian Georgiev

該dom尚未加載。一個簡單的解決方法是將所有這些放在window.onload中，或者使用jQuery的內置函數。 – Scelesto

您是否試圖跟蹤單個用戶點擊該按鈕的次數或點擊該按鈕的次數？如果是後者，你應該在鏈接元素中加入'ping'屬性，並提供服務器端資源的URL，以便更新數據庫中的計數和存儲。你不能做那個客戶端。 –

儘管如此，我很確定這是一個DOM加載問題。 – Scelesto

我不知道你使用了哪個js庫。

而是在JavaScript處理上的點擊事件是通過使用addEventListener功能。

document.getElementById('download').addEventListener('click',downloadCount);

您可以指定更多關於您使用的技術嗎？

來源

2016-11-23 21:10:27

也不起作用。我使用Express.js。 –

我的做法將是以下幾點：

1）總結你的函數調用：

// pure JavaScript equivalent to jQuery's $.ready() 
// doesn't work in older IEs 

document.addEventListener('DOMContentLoaded', function(){ 
    // your code goes here 
}, false);

獲得進一步的支持到這裏看看：http://youmightnotneedjquery.com/#ready

2）拆下內嵌處理器和使用addEventListener

const article = require("mongoose/lib/model.js"); 
const el  = document.getElementById('download'); 

el.addEventListener('click', downloadCount); 

function downloadCount(e) { 
    e.preventDefault(); 
    article.downloads += 1; 
    article.save(); 
}

All together：

<a id="download" class="btn btn-default btn-sm" href ="/uploads/{{article.imgName}}" download="{{article.imgName}}">Download</a> 

<script type="text/javascript"> 
    document.addEventListener('DOMContentLoaded', function(){ 
    const article = require("mongoose/lib/model.js"); 
    const el  = document.getElementById('download'); 

    el.addEventListener('click', downloadCount); 

    function downloadCount(e) { 
     e.preventDefault(); 
     article.downloads += 1; 
     article.save(); 
    } 
    }, false); 
</script>

來源

2016-11-23 21:24:00 NickHTTPS

document.getElementById.onClick不起作用（Javascript）

回答

相關問題