在外部javascript中设置onclick函数 [英] setting onclick function in external javascript

问题描述

我有一个功能的代码设置如下。一个.html文件基本上只包含由id标识的2个div。 head引用外部.css文件，在body结尾处引用外部.js。这个组合起作用。

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.

但是当我将.js引用移动到head时，代码不工作。具体来说，其中一个div的.onclick函数（reactionShapeId.onclick）的定义没有设置errmsgTypeError：无法设置属性'onclick'为null。因为一旦放到头部，.js代码不知道身体中的divs（reactionShape），即reactionShapeId是null。

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.

什么是正确的方式避免/处理这种依赖？我的.js代码下面。谢谢。

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();

推荐答案

问题是当你的js被执行DOM没有完全加载，特别是要添加onclick事件的元素。当你把它放在body的结尾时，到那时DOM被加载。要实现这个调用，请在jquery文档就绪函数内部使用 makeShape（）。如果你不使用jquery，你可以使用body onload事件。

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()">

注意：这里我假定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>

如果使用jquery：

If you use jquery:

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

这篇关于在外部javascript中设置onclick函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！