Tengo una barra de navegación con enlaces que llevan a diferentes partes de mi página web, la quiero para que en JavaScript haga un comando y se presione el enlace y se cambie la página web.
Mi barra de navegación
// Current JavaScript Method (Not Working) document.getElementById("section2Button").click(); <nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top"> <ul class="navbar-nav"> <li id="section1Button" class="nav-item"> <a class="nav-link" href="#section1">Colleges</a> </li> <li id="section2Button" class="nav-item"> <a class="nav-link" href="#section2">College Selected</a> </li> <li id="section3Button" class="nav-item"> <a class="nav-link" href="#section3">About Me</a> </li> </ul> </nav>document.querySelector("#section2Button a").click();Necesita consultar a una etiqueta. Y puede ponerlo en cualquier función que desee ejecutar. Por ejemplo, pongo esta acción en un botón.
Puedes ver la demostración completa aquí.
function your_command() { // Fixed query document.querySelector("#section2Button a").click(); } <button onclick="your_command()">Test command</button> <nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top"> <ul class="navbar-nav"> <li id="section1Button" class="nav-item"> <a class="nav-link" href="#section1">Colleges</a> </li> <li id="section2Button" class="nav-item"> <a class="nav-link" href="#section2">College Selected</a> </li> <li id="section3Button" class="nav-item"> <a class="nav-link" href="#section3">About Me</a> </li> </ul> </nav> <h2 id="section1">Section 1</h2> <h2 id="section2" style="margin-top: 100px">Section 2</h2> <h2 id="section3" style="margin-top: 100px">Section 3</h2>Debe agregar un detector de eventos.
var htmlElement = document.getElementById("section2Button"); htmlElement.addEventListener('click', function() { console.log('clicked'); });ver demostración
var htmlElement = document.getElementById("section2Button"); htmlElement.addEventListener('click', function() { console.log('clicked'); }); <nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top"> <ul class="navbar-nav"> <li id="section1Button" class="nav-item"> <a class="nav-link" href="#section1">Colleges</a> </li> <li id="section2Button" class="nav-item"> <a class="nav-link" href="#section2">College Selected</a> </li> <li id="section3Button" class="nav-item"> <a class="nav-link" href="#section3">About Me</a> </li> </ul> </nav>