Ejemplo de Acceso y Modificación de Enlaces

INICIO


CODE

    <nav>
        <ul>
            <li><a id="enlace1" href="https://www.google.com" target="_blank">Google</a></li>
            <li><a id="enlace2" href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
            <li><a id="enlace3" href="https://www.mozilla.org" target="_blank">Mozilla</a></li>
        </ul>
    </nav>
    <br>
    <button id="cambiarEnlace1">Cambiar Enlace 1</button>
    <button id="cambiarEnlace2">Cambiar Enlace 2</button>
    <button id="cambiarEnlace3">Cambiar Enlace 3</button>

    <script>
    // Seleccionamos los elementos de enlace del DOM por su ID
const enlace1 = document.getElementById('enlace1');
const enlace2 = document.getElementById('enlace2');
const enlace3 = document.getElementById('enlace3');

// Cambiar el href y texto del enlace 1 al hacer clic en el botón "Cambiar Enlace 1"
document.getElementById('cambiarEnlace1').addEventListener('click', () => {
    enlace1.href = 'https://www.bing.com';
    enlace1.textContent = 'Bing';
    alert('El enlace 1 ha sido cambiado.');
});

// Cambiar el href y texto del enlace 2 al hacer clic en el botón "Cambiar Enlace 2"
document.getElementById('cambiarEnlace2').addEventListener('click', () => {
    enlace2.href = 'https://www.yahoo.com';
    enlace2.textContent = 'Yahoo';
    alert('El enlace 2 ha sido cambiado.');
});

// Cambiar el href y texto del enlace 3 al hacer clic en el botón "Cambiar Enlace 3"
document.getElementById('cambiarEnlace3').addEventListener('click', () => {
    enlace3.href = 'https://www.duckduckgo.com';
    enlace3.textContent = 'DuckDuckGo';
    alert('El enlace 3 ha sido cambiado.');
});
  
    </script>