Javascript DOM doesn't recognise html elements

Question

I have a simple html page and i am trying to use some Javascript DOM to manipulate some html and create a interactive User experience but i have noticed during debugging that my DOMS arent working although JS code is pretty straighforward. I spent hours trying to figure out whats happening but still it doesnt make any sense! Below my html and javascript

<!DOCTYPE html>

<body class="container">
          <div class="backdrop"></div>

          <header class="header">

           <div class="navbar">
              <div class="logo">LOGO</div>

              <ul class="menu-list">
                <div class="icon cancel-btn">
                  <i class="fas fa-times"></i>
                </div>
                <li><a href="#">Home</a></li>
                <li><a href="#">Tours</a></li>
                <li><a href="#">NightLife</a></li>
                <li><a href="#">Food</a></li>
                <li><a href="#">Musuems</a></li>
                <li><a href="#">Sightseeing</a></li>
                <li><a href="#">Login</a></li>
                
              </ul>
              <div class="icon menu-btn">
                <i class="fas fa-bars"></i>
              </div>

           </div>



        
          </header>

          <div class="aboutUs">

            <div class="textFlexContainer">

             <div class="text-box">
                <h1 class="heading-primary">
                    <span class="heading-primary-main">City</span>   
                    <span class="heading-primary-sub">is where summer happens</span>   

                </h1>
              
                
                <div class="search-box">
                  <input class="asdf" type="text" placeholder="Explore City">
                  <button id="testBtn">asdfff</button>
      
                  </div>

                </div> 
                
              </div>
          </div>








    
          
</body>

Javascript

   const btn =document.querySelector('.search-box');
const aaa = document.querySelectorAll(".aboutUs");


console.log(btn);
console.log(aaa);

Although variable btn and aaa should return the relative divs on the console of google chrome they return empty nodes. So i cant use them to create what i want (toggling features on click etc).

I tried your code in jsfiddle and its work. ```btn.addEventListener('click', () => console.log('btn click'));``` we got needed result in console. — Will Black, Oct 22 '20 at 15:54

Javascript DOM doesn't recognise html elements

0 Answers0