3

Este código me sirve para cambiar de link (entre dos páginas), necesito que se cambie el link entre uno y otro cada vez que se haga click al mismo botón , intenté haciendo una función aparte pero no logro cambiar los links con el mismo botón:

<html>

<head>
<script type="text/javascript">
function Href(){
    document.getElementById('enlace').innerHTML=" Google"
    document.getElementById('enlace').href="http://www.google.com"
}


</script>
</head>

<body>
    <a id="enlace" href="https://espanol.yahoo.com/">yahoo es</a>
    <form>
        <input type="button" onclick="Href()" value="cambiar url y texto">
    </form>
</body>

</html>

1
  • 1
    A ver si entendi. Si le doy el primer clic, debe de cambiar a google.com y luego al dar otro clic debe de cambiar a yahoo.com otra vez y asi por el estilo?
    – Einer
    Commented el 22 mar. 2018 a las 13:45

4 respuestas 4

6

Otra opción es utilizar expresiones terniarias y una simple comparación

<html>

<head>
<script type="text/javascript">
function Href(){
///Si el texto es "Yahoo" lo cambiamos por "Google", si no es que es "Google" y lo cambiamos por "Yahoo". Lo mismo para el enlace
    document.getElementById('enlace').innerHTML= document.getElementById('enlace').innerHTML=="Yahoo" ? " Google" : "Yahoo";
    
   document.getElementById('enlace').href= document.getElementById('enlace').href=="https://es.yahoo.com/" ? "http://www.google.com" : "https://es.yahoo.com/"
}

</script>
</head>

<body>
    <a id="enlace" href="https://espanol.yahoo.com/">Yahoo</a>
    <form>
        <input type="button" onclick="Href()" value="cambiar url y texto">
    </form>
</body>

</html>

0
4

Si lo que deseas es alternar la url por cada clic, otra alternativa es utilizando un array donde tendras 2 url. Luego por cada clic le haces un reverse() al array, esto lo que hace es que invierte los elementos. Luego le asignas el primer indice y listo.

var urls = [
  {text: "Yahoo ES", url: "http://www.yahoo.com"},
  {text: "Google", url: "http://www.google.com"}
];
function Href(){
    var data = urls.reverse()[0]; // el dice 0 pasa al indice 1 y viceversa.
    document.getElementById('enlace').innerHTML= data.text;
    document.getElementById('enlace').href= data.url;
}
<a id="enlace" href="https://espanol.yahoo.com/">Yahoo ES</a>
<form>
    <input type="button" onclick="Href()" value="cambiar url y texto">
</form>

Asi lo hacemos las simple sin necesidad de if y flags.

4

Deberías agregar un flag o bandera para que cambie por uno o por otro el valor del href y texto. Y en vez de generar un botón para que haga ese cambio, lo aplicás al link la función del onClick. Por ejemplo:

// este es un flag booleano inicializado en true
var flag = true;

// función para obtener los cambios
function Href() {
  var element = document.getElementById('enlace');
  if (flag) {
    element.innerHTML = " Google";
    element.href = "http://www.google.com";
  } else {
    element.innerHTML = " Stackoverflow";
    element.href = "https://es.stackoverflow.com";
  }
  // cambio el valor del flag
  flag = !flag;
}
<!-- Aquí agrego la función del `onClick`-->

  <a id="enlace" href="https://espanol.yahoo.com/" onClick="Href()">yahoo es</a>

1
  • 1
    La pregunta menciona que se debe hacer un cambio al hacer clic en un botón pero tu código no incluye el botón.
    – Rubén
    Commented el 22 mar. 2018 a las 15:51
1

var intercambiar = (e, links) => {
 let temp = 0;
 
 document.getElementById(e).onclick = _ => {
 
 document.getElementById("webLink").innerHTML = 
 temp === 0 ? (temp++, links[temp]) 
            : (temp--, links[temp]);
 };
};

intercambiar("cambiar",["https://google.com","https://website.com"]);
<input id="cambiar" type="button" value="Cambiar">
<b id="webLink"></b>

1
  • Hola Eduardo Sebastian, esta respuesta ha sido marcada como de baja calidad por la comunidad. Edítala para añadir algo más de detalle: ¿qué hace el código? ¿Cómo soluciona el problema expuesto en la pregunta?
    – Jorgesys
    Commented el 31 mar. 2018 a las 11:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.