Get nested button id in header – Blancer.com Tutorials and projects

So I’m trying to reference my button (which is nested inside my header/nav), to make an event onclick, but I cant seem to get it to work. Tried nesting getElementByName with getelementbyid tried some queryselector and querySelectorAll been watching a lot of videos and tutorials don’t know if I’m just doing them wrong thanks.

Tried:

var x = document.getElementsByClassName('hdr');
var y= x.querySelector('hdrBtns');
z = y.getElementById('singUp');

Tried:

const brt = document.querySelectorAll('.hdr .hdrBtns');
const dac = brt.getElementById('signUp');

Code Underneath:

 <body>
        <header class="hdr">
            <div class="hLogo">
                <h1>
                    Test
                </h1>               
            </div>

            <nav class="hdrBtns">
                <button id="singUp">Sign Up</button>
                <button id="singIN">Sign In</button> 
                
            </nav>
        </header>
     <script src="./script.js"></script>
    </body>