document.getElementById.onClick doesn't work (Javascript)

Question

My problems is: I am trying to count all downloads. I do that by adding +1 to my database everytime the button is clicked and then I simply take the database value and display it. I've tried numerous ways but no matter what I do the downloads stay zero. I prefer raw javascript/html because I am not that advanced and I want to do it a way that I understand it.

I've also tried pasting the script in the body and the head but without effect.

<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>

The dom hasn't loaded yet. An easy fix would be to put all of that in window.onload, or use jquery's builtin function. — Scelesto, Nov 23 '16 at 20:58
Are you trying to track how many times a single user has clicked the button or how many times any use has clicked the button? If it is the latter, you should add the `ping` attribute to your link element and supply the url of a server-side resource that will update the count and store in your database. You can't do that client-side. — Scott Marcus, Nov 23 '16 at 20:59
Seriously, though, I'm pretty sure it's a DOM loading issue. — Scelesto, Nov 23 '16 at 21:00
What exactly should I put in a window.onload? The whole const I declared? — Maximilian Georgiev, Nov 23 '16 at 21:01

score 1 · Answer 1 · answered Nov 23 '16 at 21:10

1

I don't know which js library you used.

but about handling the on click event in javascript is by using addEventListener function.

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

Can you specify more about what technologies you used.

answered Nov 23 '16 at 21:10

mohamed el amine DADDOU

11
1

Doesn't work either. I use Express.js. – Maximilian Georgiev Nov 23 '16 at 21:14

score 0 · Answer 2 · answered Nov 23 '16 at 21:24

My approach will be the following:

1) Wrap your function call with:

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

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

For further support take a look here: http://youmightnotneedjquery.com/#ready

2) Remove the inline handler and use 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>

document.getElementById.onClick doesn't work (Javascript)

2 Answers2