¿Cómo insertar una variable JavaScript dentro del atributo href?

Las etiquetas <a > … </a> se utilizan para crear hipervínculos en HTML.
Uno de los atributos deetiqueta ‘a’ es ‘href’

href: especifica la URL de la página a la que va el enlace

Ejemplo:

<a href="https://www.geeksforgeeks.org/">
    GeeksforGeeks
</a>

Métodos para usar Variables dentro de este atributo ‘href’ :

Uso de la propiedad onclick:
este método utiliza la propiedad ‘onclick’ de la etiqueta ‘a’,
es decir, cada vez que se hace clic en el enlace (etiqueta ‘a’), se activa un evento ‘onclick’.
Aquí usaremos este evento onclick para generar una nueva URL y redirigir al usuario a esa URL.
(NOTA: esta URL contendrá la variable que queremos usar dentro del atributo href)

Pasos:
Primero, necesitamos saber los siguientes términos,

“ubicación.href” -> Es la URL completa de la página actual.
“esto” -> Se refiere a la etiqueta ‘a’ en la que se ha hecho clic.
“this.href” -> obtiene el valor href de la etiqueta ‘a’.

Una vez que tengamos «this.href», agregue la variable (aquí hemos usado una variable llamada «XYZ»).
Luego, debemos agregar el valor a la URL.
Ahora nuestra URL está lista con la variable y su valor adjunto.

En el siguiente ejemplo, agregaremos una variable llamada ‘XYZ’ y su valor es 55.

<!DOCTYPE html>
<html>
<head>
    <title>GeeksforGeeks</title>
    <script>
        var val = 55;
    </script>
</head>
    <body>                 
          
        Link to <a href="https://www.google.com/"
onclick="location.href=this.href+'?xyz='+val;return false;">
     Google
</a>
          
    </body>
</html>

Resultant Url: https://www.google.com/?xyz=55

‘val’ es la variable javascript que almacena el valor que queremos pasar a la URL.
La URL tiene una variable llamada ‘XYZ’ que toma el valor = 55 de la variable javascript ‘val’.

Uso de document.write:
document: cuando se carga un documento HTML en un navegador web, se convierte en un objeto de documento.
Este objeto de documento tiene varias funciones, una de ellas es escribir().
write(): escribe expresiones HTML o código JavaScript en un documento
. En este método, usaremos esta función write() para crear una «etiqueta».

<!DOCTYPE html>
<html>
<head>
    <title>GeeksforGeeks</title>
    <script>
        var val = 55;
    </script>
</head>
    <body>                 
        Link to 
        <script>
            var loc = "https://www.google.com/?xyz="+val;
            document.write('<a href="' + loc + '">Google</a>');
        </script>
    </body>
</html>

Resultant Url: https://www.google.com/?xyz=55

‘val’ es la variable javascript que almacena el valor que queremos pasar a la URL.
La URL tiene una variable llamada ‘XYZ’ que toma el valor = 55 de la variable javascript val.

Publicación traducida automáticamente

Artículo escrito por 7maestro y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta