Блог

Главная - Вопросы по программированию - При загрузке заголовка из папки кнопки получают сообщение об ошибке

При загрузке заголовка из папки кнопки получают сообщение об ошибке

#javascript #html #css

#javascript #HTML #css

Вопрос:

 let myBtn = document.querySelector(".mainBtn");

let myManu = document.querySelector(".manu");

let manuOpen = false;

myManu.style.marginTop="-200px";

function menuFunction() {
    if(manuOpen == false) {    myManu.style.marginTop = "0px";
        manuOpen = true;
    }
    else if (manuOpen == true) {
        myManu.style.marginTop = "-200px";
        manuOpen = false;
    }
}

myBtn.onclick = menuFunction;  
 .mainBtn {
    width: 40px;
    height: 40px;
    background: red;
    z-index: 100;
    margin-left: 10px;
    cursor: pointer;
}

.mainBtn:hover {
    background: yellow;
}

.social {
    margin-right: 10px;
    z-index: 100;
}

.manuSection {
    max-width: 1080px;
    width: 100%;
    padding: 20px 0 20px 0;
    float: right;
    text-align: right;
}

.manu {
   top: 40px;
   max-width:1080px;
   width: 100%; 
   position: absolute;
   background: black;
   transition: ease-in-out .5s;

}

.manu>ul>li, .manu>ul>li>a{
   list-style: none;
   text-decoration: none;
   color: white;
}

.menuItems{
    display: flex;
    background: rgba(0,0,0,0.4);
    justify-content: center;
    margin: 2px;
    padding: 7px;
}

.menuItems:hover{
    background: rgba(134,134,134,0.32);
}  
 <head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500amp;display=swap" rel="stylesheet">
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
 <script>
$(function(){
$("header").load("asserts/header.html");
$("footer").load("asserts/footer.html");
});
</script>
    
</head>

<body>
<header></header>

когда заголовок был в index.html файл js «menuFunction» работал правильно, однако я подумал о загрузке верхнего и нижнего колонтитулов из разных папок на каждую страницу, взял часть заголовка и загрузил в раздел «заголовок». ! и поиск функции js выдает сообщение об ошибке ..»»Неперехваченная ошибка типа: не удается прочитать свойство ‘style’ из null»,».

код заголовка

   <div class="headerItems">
    <div class="manuSection">
        <div class="socialAndBtn">
            <div class="mainBtn"></div>
    
            <div class="social">
             <img src="https://picsum.photos/40/40?random=1" alt="">
             <img src="https://picsum.photos/40/40?random=2" alt="">
             <img src="https://picsum.photos/40/40?random=3" alt="">
             </div>
        </div>
        <div class="manu">
            <ul>
                <li><a href=""><span class="menuItems">Home</span></a></li>
                <li><a href=""><span class="menuItems">Services</span></a></li>
                <li><a href=""><span class="menuItems">Products</span></a></li>
                <li><a href=""><span class="menuItems">Contact</span></a></li>
            </ul>
        </div>
    
        
    </div>
    
    <div class="title"><h1>My Business Name</h1></div>
    <div class="telephone"><h2>416 999 9999</h2></div>
    
</div>

Ответ №1:

Когда браузер считывает код js, особенно document.querySelector(".mainBtn") document.querySelector(".manu") содержимое заголовка, которое еще не загружено, отсюда и сообщение об ошибке. load метод может принимать функцию обратного вызова в качестве второго аргумента, эта функция будет выполнена после загрузки файла. Я советую переместить ваш 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;
        }
    }
});

Комментарии:

1. Привет, спасибо за совет и извините, я не уверен, куда мне вставить этот фрагмент кода? Я имею в виду в заголовке HTML или JS-файле -Спасибо

2. В вашем коде замените $("header").load("asserts/header.html"); код в ответе из кода JS, который вы нам дали, удалите все (оно было перемещено внутри обратного вызова), кроме function menuFunction() {…}

3. Я отредактировал как <script> $(function(){ $(«header»).load(«asserts/header.html», function(){ let myBtn = document. querySelector(«.mainBtn»); пусть myManu = document . querySelector(«.manu»); пусть manuOpen = false; myManu.style.marginTop=»-200px»; myBtn.onclick = menuFunction; }); $(«нижний колонтитул»).load(«asserts/footer.html «); }); </script> Все равно это не работает

4. Внутри функции menuFunction есть manuOpen и myManu которые объявляются с let помощью (эти переменные являются областью действия для блока). Попробуйте использовать функцию menuFunction внутри блока (я обновил ответ)

5. Это работает, сэр ..! Большое вам спасибо, очень ценю и желаю вам всего наилучшего в ваших будущих начинаниях.