Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/400.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 从文件夹加载标题时,按钮获取错误消息_Javascript_Html_Css - Fatal编程技术网

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
(我已经更新了答案)它正在工作,先生!非常感谢您,非常感谢并祝愿您在未来的努力中一切顺利。