How to change URL dynamically with JQuery

I'm new at Jquery and Javascript. I was trying to modify this example at: w3schools to change to url from the initial: www.w3schools.com to the second one at: www.w3schools.com/jquery and back again to the initial one when click on the button (as many times as desired), but I can not figure out how to do it. Please, include all the code in the answer, it will be easier. Thanks.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
$("button").click(function(){
    $("#w3s").attr("href", "https://www.w3schools.com/jquery");
});
});
    </script>
</head>
<body>
    <p>
        <a href="https://www.w3schools.com" id="w3s">
            W3Schools.com
        </a>
    </p>
    <button>
        Change href Value
    </button>
    <p>
        Mouse over the link (or click on it) to see that the value of the href attribute has changed.
    </p>
</body>
</html>

3 answers

  • answered 2017-06-17 18:16 Spencer Wieczorek

    You can just use a basic if-else and check the href attribute.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
          var w3schoolURL = "https://www.w3schools.com";
          if( $("#w3s").attr("href") === w3schoolURL )
            $("#w3s").attr("href", "https://www.w3schools.com/jquery");
          else
            $("#w3s").attr("href", w3schoolURL);
        });
    });
    </script>
    </head>
    <body>
    
    <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
    
    <button>Change href Value</button>
    
    <p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
    
    </body>
    </html>

  • answered 2017-06-17 18:16 rgetty

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function(){
    	var w3 = "https://www.w3schools.com";
    	var w3Jquery = "https://www.w3schools.com/jquery";
    	var toggleFlag = true;
        $("button").click(function(){
            if(toggleFlag){
            	$("#w3s").attr("href", w3Jquery);
            }
            else{
            	$("#w3s").attr("href", w3);	
            }
            toggleFlag = !toggleFlag;
        });
    });
    </script>
    
    <body>
    <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
    
    <button>Change href Value</button>
    
    <p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
    
    </body>

  • answered 2017-06-17 18:16 RïshïKêsh Kümar

    First Hover the Link You Will See... www.w3school.com .... after click on button link change ... you can check it with hover the Link. Work Link as a toggle

    https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
    
    <button>Change URL</button>
    
    <p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
    
    
    <script>
    $(document).ready(function(){
    
        $("button").click(function(){
        
          var myURL = "https://www.w3schools.com";
          if( $("#w3s").attr("href") === myURL )
            $("#w3s").attr("href", "https://www.w3schools.com/jquery");
          else
            $("#w3s").attr("href", myURL);
        });
    });
    </script>
    </head>
    <body>
    
    
    
    </body>
    </html>