在外部 JavaScript 中设置 OnClick 函数

setting onclick function in external javascript

本文关键字：OnClick 函数 设置 外部 JavaScript      更新时间：2023-09-26

我有一个功能正常的代码段，如下所示。一个.html文件，基本上只包含 2 个由"id"标识的div。"head"引用外部.css文件，在"body"的末尾引用外部.js。这种组合有效。

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

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

    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事件的元素。当你把它放在正文的末尾时，到那时 DOM 已经加载了。要实现此目的，请在 jquery 文档就绪函数中调用 makeShape（）。如果你不使用jquery，你可以bodyonload事件。

<body onload="makeShape()">

注意：在这里我假设makeShape是你要调用的函数，否则用你的函数替换它

编辑

如果上述解决方案不起作用，请在头部放置

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

如果你使用 jquery：

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

在这里，您正在尝试访问DOM中不存在/加载/添加的元素

  • 你可以在 html 内容之后包含 js 代码（你想在 JS 代码中引用）。
  • 您可以使用 onload 事件来检查何时加载 DOM 执行 js，以确保加载所有 DOM 元素。

最佳做法是您应该在页面底部的结束标记之前加载 JavaScript。

有关更多详细信息解释，请参阅此处的博客

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 （外部文件）

//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={}));
相关文章：