极客观点
项目管理
HarmonyOS
我在一个函数中用docment.createElement()方法创建一个元素后，在这个函数外便无法访问，用alert()来看，为null。但是我在下一个函数中又可以访问。
请问这个是为什么？？
js部分：
//begin
function addLoadEvent(func){
var oldonload=window.onload;
if (typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}
function insertAfter(newElement, targetElement){
var parent=targetElement.parentNode;
if (parent.lastChild==targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
function preparePlaceholder(){
if (!document.createElement) return false;
if (!document.createTextNode) return false;
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
var placeholder=document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "image/placeholder.png");
placeholder.setAttribute("alt", "my gallery");
var description=document.createElement("p");
description.setAttribute("id", "description");
var text=document.createTextNode("Choose one");
description.appendChild(text);
var gallery=document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
function prepareGallery(){
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery=document.getElementById("imagegallery");
var links=gallery.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick=function(){
return showpic(this);
}
}
}
var des=document.getElementById("description");
alert(des);//这里的时候浏览器显示null；
function showpic(pic){
if (!document.getElementById("placeholder")) return false;
var source=pic.getAttribute("href");
var plc=document.getElementById("placeholder");
if (plc.nodeName!="IMG") return false;
plc.setAttribute("src", source);
var des=document.getElementById("description");
alert(des);//这里的时候浏览器显示 object;
if (document.getElementById("description")){
var text=pic.getAttribute("title") ? pic.getAttribute("title") : "";
var description=document.getElementById("description");
if (description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
}
return false;
}
var des=document.getElementById("description");
alert(des);,
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testP1</title>
<link rel="stylesheet" href="sheet.css">
</head>
<body>
<h1>Click To Change</h1>
<ul id="imagegallery">
<li>
<a href="image/red.png" title="Red"><img src="image/red.png" alt="Red"></a>
</li>
<li>
<a href="image/yellow.png" title="Yellow"><img src="image/yellow.png" alt="Yellow"></a>
</li>
<li>
<a href="image/green.png" title="Green"><img src="image/green.png" alt="Green"></a>
</li>
</ul>
<script src="gallery.js"></script>
</body>
</html>
谢谢各位了！！感激不尽。
外层alert(des)执行的时候,你的创建元素的函数还没执行呢。
创建元素的函数是LoadEvent的回调函数。
走到这一行之前时，外部的alert已经执行，但是回调事件还没执行(不止没执行，都没创建事件监听)
就这么简单。你可以写个debugger或者多加几个console.log("各个函数的名字")看看执行顺序。
简化下你的程序
你创建元素的时候，都已经获取过了，des指向null了，还怎么指向你创建的元素。
而且在浏览器端事件的回调函数是主js走完之后才可能被执行。
就是说
createEl虽然在console.log()之前被声明了，但是执行是在console.log('主js执行完毕');这个语句执行之后,并且触发window.onload才会执行，还不明白就去搜js Event Loop