setting onclick function in external javascript

Question

I have a functioning piece of code set up as follows. An .html file containing basically just 2 divs identified by "id". The "head" references an external .css file and at the end of "body" a reference to an external .js. This combination works.

But when I move the .js reference into the "head", the code does not work. Specifically, the definition of an .onclick function (reactionShapeId.onclick) for one of the divs is not getting set with errmsg "TypeError: Cannot set property 'onclick' of null". Because once put into the the head, the .js code does not know about the divs (reactionShape) in the body yet, ie reactionShapeId is null.

What is the proper way to avoid/handle this kind of dependency? My .js code below. Thanks.

    var reactionShapeId = document.getElementById("reactionShape");
      var createdTime, clickedTime;
      var maxDelay = 5000; // milliseconds
      console.log(reactionShapeId);

      // set absolute limits to the shape - equilateral is assumed
      var maxLength = Math.min(300,window.innerWidth,window.innerHeight);
      var minLength = Math.min(50,maxLength);
      var minOpacity = 0.25;

      // dynamically determined shape variables
      var shapeLength;
      var shapeBorderRadius; // square or circle
      var posX, posY;
      var colourRed, colourGreen, colourBlue, colourOpacity;

      // statistics
      var maxTrials = 10;
      var trialResults = new Array();
      var trialCounter = 0;
      var trialTotal = 0;
      var trialAverage;

      function makeShape() {

         trialCounter = trialCounter + 1;

         // first determine properties for shape
         shapeLength = minLength + (maxLength-minLength) * Math.random(); 
         if (Math.round(Math.random()) == 1) {
            shapeBorderRadius = 0;
         } else {
            shapeBorderRadius = shapeLength / 2;
         }
         posX = (projectReactionTester.offsetWidth - shapeLength) * Math.random();
         posY = (projectReactionTester.offsetHeight - shapeLength) * Math.random();
         colourRed = Math.floor(256 * Math.random());
         colourGreen = Math.floor(256 * Math.random());
         colourBlue = Math.floor(256 * Math.random());
         colourOpacity = minOpacity + (1-minOpacity) * Math.random();

         // tidy up
         if (colourRed==256) colourRed=255;
         if (colourGreen==256) colourGreen=255;
         if (colourBlue==256) colourBlue=255;

         console.log(shapeLength, shapeBorderRadius, posX, posY, 
            colourRed, colourGreen, colourBlue, colourOpacity,
            trialCounter, trialTotal);

         // setting of properties must be done altogether
         reactionShapeId.setAttribute("style",
            "width:" + shapeLength + "px;"
            + "height:" + shapeLength + "px;"
            + "border-radius:" + shapeBorderRadius + "px;"
            + "position: relative;"
            + "left:" + posX + "px;"
            + "top:" + posY + "px;"
            + "background-color:rgba(" + colourRed + ","
            + colourGreen + "," 
            + colourBlue + "," 
            + colourOpacity + ");");

         // then set delay timer
         // .display must be set to "block" instead of "inline"
         var delayTime = maxDelay * Math.random();
         console.log(delayTime);
         setTimeout(function() {
            createdTime = Date.now();
            reactionShapeId.style.display = "block";
         },delayTime);

      }

      reactionShapeId.onclick = function() {

         clickedTime = Date.now();
         trialResults[trialCounter] = clickedTime - createdTime;
         trialTotal = trialTotal + trialResults[trialCounter];
         this.style.display = "none";
         document.getElementById("reactionTime").innerHTML = trialResults[trialCounter];

         // display statistics & re-initialize
         if (trialCounter == maxTrials) {
            trialAverage = trialTotal / trialCounter;
            alert("Your average response time over " + trialCounter + " trials is " + trialAverage + " ms");
            trialCounter = 0;
            trialTotal = 0;
         }

         // next trial
         makeShape();
      }

      makeShape();

This is primarily an exercise to see if & how it works. I'm finding it does not work - at least it does not work by simply moving the script tag to the head. — rockhammer
– rockhammer, Commented Mar 17, 2016 at 23:59

Kishore Barik · Accepted Answer · 2016-03-18 05:25:54Z

2

The issue is when your js is being executed the DOM is not loaded completely, specially the element to which you are adding onclick event. When you put this in end of body, by that time the DOM is loaded. To achieve this call the makeShape() inside jquery document ready function. If you are not using jquery you can body onload event.

<body onload="makeShape()">

Note: Here I assume makeShape is the function you are going to call, else replace it with your function

EDIT

If the above solution doesn't work, in head put

<script>
  document.addEventListener("DOMContentLoaded", function() {
    makeShape();
  });
</script>

If you use jquery:

$(document).ready(function(){
 makeShape();
})

edited Mar 18, 2016 at 5:25

answered Mar 17, 2016 at 18:00

Kishore Barik

7603 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rockhammer Over a year ago

thank you, Kishore. This will help me call the function at the right time. However, it probably does not fix the problem of my onclick function not getting set because at load time the relevant element id is NULL.

Kishore Barik Over a year ago

You are welcome. Are you using jquery? you can use $(document).ready()

itzmukeshy7 · Accepted Answer · 2016-03-17 18:17:21Z

2

Here you are trying to access an element which don't exists/loaded/added in DOM

You can include js code after html content(you want to refer in JS code).
You can use onload event to check when DOM is loaded execute js which makes sure that all DOM elements loaded.

answered Mar 17, 2016 at 18:17

itzmukeshy7

2,6781 gold badge24 silver badges30 bronze badges

1 Comment

rockhammer Over a year ago

thanks, itzmukeshy7. Hiren showed a way to call a function using onload. But console log shows the onclick function could not be set because the relevant element id at load time is NULL. Is there a way to get around this while keeping .js in the head, or does this necessity the onclick to be defined at bottom of body? thanks

Hiren patel · Accepted Answer · 2016-03-17 17:47:57Z

1

Best practice is you should load your JavaScript in the bottom of the page, right before the closing tag.

For more detail explaination , refer this blog here

answered Mar 17, 2016 at 17:47

Hiren patel

9819 silver badges25 bronze badges

1 Comment

rockhammer Over a year ago

Thanks, Hiren. Some things like setting onclick functions seems only possible at bottom of body

Bappi Das · Accepted Answer · 2019-12-26 10:14:41Z

0

HTML

<body>

   <div id="showText"></div>

   <button type="button" onclick="myFunction()">Click Here</button>

   <button type="button" onclick="GLOBAL.myNewFunction()">Click Here</button>

   <script src="js/index.js"></script>

</body>

JavaScript - index.js (External File)

//The First Method

window.myFunction = function(){
   alert("It's working!");
   document.getElementById("showText").innerHTML = "This line is written by JavaScript."
}


//The Second Method

(function(GLOBAL){
   function myNewFunction(){
       alert("It's working!");
       document.getElementById("showText").innerHTML = "This line is written by JavaScript."
   }
   GLOBAL.myNewFunction = myNewFunction;
})(window.GLOBAL || (window.GLOBAL={}));

edited Dec 26, 2019 at 10:14

answered Dec 26, 2019 at 9:40

Bappi Das

315 bronze badges

Collectives™ on Stack Overflow

setting onclick function in external javascript

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related