在外部javascript中设置onclick函数
我有一段功能代码，设置如下。一个.html文件，基本上只包含由“id”标识的2个div。“head”引用一个外部.css文件，“body”结尾引用一个外部.js文件。这种组合有效 但是当我将.js引用移动到“head”中时，代码就不起作用了。具体而言，其中一个div的.onclick函数（reactionShapeId.onclick）的定义未使用errmsg“TypeError:无法将属性“onclick”设置为null”。因为一旦放入头中，.js代码还不知道主体中的div（reactionShape），即reactionShapeId为null 避免/处理这种依赖关系的正确方法是什么？下面是我的.js代码。谢谢在外部javascript中设置onclick函数,javascript,html,css,external,Javascript,Html,Css,External,我有一段功能代码，设置如下。一个.html文件，基本上只包含由“id”标识的2个div。“head”引用一个外部.css文件，“body”结尾引用一个外部.js文件。这种组合有效 但是当我将.js引用移动到“head”中时，代码就不起作用了。具体而言，其中一个div的.onclick函数（reactionShapeId.onclick）的定义未使用errmsg“TypeError:无法将属性“onclick”设置为null”。因为一旦放入头中，.js代码还不知道主体中的div（reactionS
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 document ready函数中调用makeShape（）。如果您不使用jquery，则可以使用body onload事件
<body onload="makeShape()">
问题是当执行js时，DOM没有完全加载，特别是添加onclick事件的元素。当您将其放在body的末尾时，DOM将被加载。要实现此目的，请在jquery document ready函数中调用makeShape（）。如果您不使用jquery，则可以使用body onload事件
<body onload="makeShape()">
- 您可以在html内容之后包含js代码（您希望在js代码中引用）
- 您可以使用onload事件来检查何时加载DOM，并执行js，以确保所有DOM元素都已加载
- 您可以在html内容之后包含js代码（您希望在js代码中引用）
- 您可以使用onload事件来检查何时加载DOM，并执行js，以确保所有DOM元素都已加载
- HTML
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><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>
是什么迫使你把js放进去的？这主要是一个练习，看看它是否和如何工作。我发现它不起作用-至少它不起作用，只是简单地将脚本标记移动到头部。是什么迫使你把js放进去的？这主要是一个练习，看看它是否和如何工作。我发现它不起作用——至少把脚本标签移到头部是不起作用的。谢谢你，Kishore。这将帮助我在正确的时间调用函数。但是，它可能无法解决我的onclick函数未设置的问题，因为在加载时，相关元素id为NULL。欢迎使用。您正在使用jquery吗？您可以使用
谢谢您，Kishore。这将帮助我在正确的时间调用函数。但是，它可能无法解决我的onclick函数未设置的问题，因为在加载时，相关元素id为NULL。欢迎使用。您正在使用jquery吗？您可以使用$（document）.ready（）
谢谢，itzmukeshy7。Hiren展示了一种使用onload调用函数的方法。但控制台日志显示无法设置onclick函数，因为加载时的相关元素id为NULL。有没有一种方法可以绕过这个问题，同时将.js保存在头部，或者是否需要在身体底部定义onclick？谢谢你，伊兹穆克希。Hiren展示了一种使用onload调用函数的方法。但控制台日志显示无法设置onclick函数，因为加载时的相关元素id为NULL。有没有一种方法可以绕过这个问题，同时将.js保存在头部，或者是否需要在身体底部定义onclick？谢谢，汉克斯，海伦。有些事情，比如设置onclick函数，似乎只有在身体底部才可能。谢谢你，海伦。有些事情，比如设置onclick函数，似乎只有在身体底部才可能实现$（document）.ready（）//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={}));