Javascript 从文件夹加载标题时,按钮获取错误消息
Javascript 从文件夹加载标题时,按钮获取错误消息,javascript,html,css,Javascript,Html,Css,让myBtn=document.querySelector(“.mainBtn”); 设myManu=document.querySelector(“.manu”); 让我们打开=假; myManu.style.marginTop=“-200px”; 函数菜单函数(){ 如果(manuOpen==false){myManu.style.marginTop=“0px”; manuOpen=true; } else if(manuOpen==true){ myManu.style.marginTop
让myBtn=document.querySelector(“.mainBtn”);
设myManu=document.querySelector(“.manu”);
让我们打开=假;
myManu.style.marginTop=“-200px”;
函数菜单函数(){
如果(manuOpen==false){myManu.style.marginTop=“0px”;
manuOpen=true;
}
else if(manuOpen==true){
myManu.style.marginTop=“-200px”;
manuOpen=false;
}
}
myBtn.onclick=菜单函数代码>
.mainBtn{
宽度:40px;
高度:40px;
背景:红色;
z指数:100;
左边距:10px;
光标:指针;
}
.mainBtn:悬停{
背景:黄色;
}
.社会{
右边距:10px;
z指数:100;
}
曼努科医生{
最大宽度:1080px;
宽度:100%;
填充:20px 0 20px 0;
浮动:对;
文本对齐:右对齐;
}
马努先生{
顶部:40px;
最大宽度:1080px;
宽度:100%;
位置:绝对位置;
背景:黑色;
过渡:易进易出。5s;
}
.manu>ul>li、.manu>ul>li>a{
列表样式:无;
文字装饰:无;
颜色:白色;
}
梅努特姆斯先生{
显示器:flex;
背景:rgba(0,0,0,0.4);
证明内容:中心;
保证金:2倍;
填充:7px;
}
.menuItems:悬停{
背景:rgba(134134,0.32);
}
无标题文件
$(函数(){
$(“header”).load(“asserts/header.html”);
$(“footer”).load(“asserts/footer.html”);
});
当浏览器读取js代码时,尤其是document.querySelector(“.mainBtn”)
和document.querySelector(“.manu”)
标头的内容尚未加载,因此会显示错误消息。方法可以将回调函数作为第二个参数,该函数将在加载文件后执行。我的建议是在这个回调中移动js代码,就像这样
$("header").load("asserts/header.html", function () {
let myBtn = document.querySelector(".mainBtn");
let myManu = document.querySelector(".manu");
let manuOpen = false;
myManu.style.marginTop = "-200px";
myBtn.onclick = menuFunction;
function menuFunction() {
if (manuOpen == false) {
myManu.style.marginTop = "0px";
manuOpen = true;
} else if (manuOpen == true) {
myManu.style.marginTop = "-200px";
manuOpen = false;
}
}
});
您好,谢谢您的建议,很抱歉,我不确定在哪里插入这段代码?我的意思是在HTML头文件或JS文件中-ThanksIn您的代码替换$(“header”).load(“asserts/header.HTML”)代码>根据答案中的代码+从您给我们的JS代码中删除所有内容(已在回调中移动),除了函数menuFunction(){…}
我像$(function(){$(“header”).load(“asserts/header.html”,function(){let myBtn=document.querySelector(.mainBtn”);let myManu=document.querySelector(“.manu”);let manuOpen=false;myManu.style.marginTop=“-200px”;myBtn.onclick=menuffunction;});$(“footer”).load(“asserts/footer.html”);});在函数menuffunction
中仍然不起作用,有manuOpen
和myManu
用let
(这些变量是块的范围)。试着在块内使用函数menuffunction
(我已经更新了答案)它正在工作,先生!非常感谢您,非常感谢并祝愿您在未来的努力中一切顺利。