onclick isn't working with other JS file

Question

The onclick works when its not in the same html file as Kill_Count, but when they're together, only the Kill_Count file executes, the button still shows up, but when you click it, nothing happens...

Button.html:

<html>
<head>
    <script src="window.js"></script>
    <script src="Kill_Count.js"></script>
</head>
<body>
    <button type="button" id="Vegan Site">Vegan Site</button>
    <table>
      <tr>
        <td width="424.2">
      Some stuff about Animals.
        </td>

      <td>        
      <table cellpadding="0" cellspacing="0">   

        <tr>
        <td>Chickens</td>
        <td align="right">
        <span id="Kill_Count"></span>
        </td>
        </tr>

        <tr>
        <td>Pigs</td>
        <td align="right">
        <span id="Kill_Count2"></span>
        </td>
        </tr>

      </table>  
      </td>
      </tr>
    </table>  
</body>
</html>

window.js:

window.onload = function () {
    function myFunction() {
        window.open("http://www.abolitionistapproach.com/");
    }

    var Process = document.getElementById('Vegan Site');
    Process.onclick = myFunction;
}

Kill_Count.js

function Kill_Count(id)
{
  var animal = "Chickens";
  var totalDeaths = 49877536490;
  var deathsPerSecond = totalDeaths/365/24/60/60/4;
  var deaths = 0;
  var timer = 1;
  setInterval(function() {    
     deaths = deathsPerSecond*timer;     
     result = deaths.toFixed();
     document.getElementById(id).innerHTML = result;
     timer++;
  }, 250);
}

function Kill_Count2(id)
{
  var animal = "Pigs";
  var totalDeaths = 1375940758;
  var deathsPerSecond = totalDeaths/365/24/60/60/4;
  var deaths = 0;
  var timer = 1;
  setInterval(function() {    
     deaths = deathsPerSecond*timer;     
     result = deaths.toFixed();
     document.getElementById(id).innerHTML = result;
     timer++;
  }, 250);
}


window.onload = Kill_Count('Kill_Count');
window.onload = Kill_Count2('Kill_Count2');

score 0 · Answer 1 · answered May 04 '14 at 22:36

0

In the last line, you override the previous line. window.onload can only have one value and when you assign it twice, the last wins. For the same reason, when you include both of the files, you override window.onload and the window.js assignment to window.onload is ignored. Note that since you do not return a function in the Kill_Count, you actually assign undefined to window.onload and the function is run right when you assign it and not really on load. Basically, nothing happens on load.

In order to add multiple listeners to window.onload, you need to use window.addEventListener("load", someFunction, false) (and window.attachEvent("onload", someFunction);, if you support Internet Explorer 8 and below). You can call it multiple times and all of the functions will fire on load.

answered May 04 '14 at 22:36

PhistucK

2,466
1
26
28

The Kill_Count.js works with 10 different values that are all updated properly(I just didn't include everything for the sake of not repeating things), the last value in Kill_Count.js is not the only value to be updated, all of them are updated in real time... – user3334776 May 04 '14 at 22:39
According to this post, there's virtually no difference between onclick and addEventListener('click', function)... http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – user3334776 May 04 '14 at 22:40
Of course there is a difference, with `onclick` you cannot assign multiple listeners and with `addEventListener`, you can. That is a very serious different. And the post to which you linked states that. – PhistucK May 04 '14 at 22:43
And by the way, the `window.onload` assignments in Kill_Count are meaningless (for Kill_Count), because as I wrote, they do not return a function. They are, like you mentioned, run in real time, not at load. They would do the same thing if you just replaced, for example, `window.onload = Kill_Count('Kill_Count');` with simply `Kill_Count('Kill_Count');` (no assignment, just calling it and that is it). – PhistucK May 04 '14 at 22:45
And besides, `onclick` is not the problem. The problem is that the function that has the `onclick` assignment is not run, because it is supposed to run on load, but you override the `window.onload` with `undefined` that is returned from the `Kill_Count` calls. – PhistucK May 04 '14 at 22:48
Interesting, I'll definitely look further into it. I changed both files, but it still doesn't work http://jsfiddle.net/#&togetherjs=eli3NwpTgP – user3334776 May 04 '14 at 22:56
So jsfiddle isn't a good site for testing if a button will open a new window, also just doing Kill_Count('Kill_Count'); doesn't work, it needs the addEventListener. Either way, its working now, thanks. – user3334776 May 05 '14 at 00:06
Hm, you really got it wrong in the last JSFiddle... you have overridden `window.addEventListener`! Never do that... it makes it impossible to use it later. `window.addEventListener` is a function, you should not assign anything to it (unless you want to intercept the calls, but in this case, you certainly do not). `window.addEventListener("load", theFunction)` is the way to do it. I am not sure about the reason why `Kill_Count('Kill_count')` is not working for you, but the code in that JSFiddle is a real mess right now... – PhistucK May 05 '14 at 05:52
That's really odd, the Kill_Count.js was working even though addEventListener wasn't working... I fixed the jsfiddle, but the window.js still wont popup so I'm assuming its something to do with jsfiddle itself. I've gotten this to work in my actual code though, thanks for offering the help either way. – user3334776 May 09 '14 at 21:52

onclick isn't working with other JS file

1 Answers1