The function doesn't redirect to the right place and alert doesn't work

Question

I try to redirect to sign.html#signperiod and it only redirects to the page itself

The second problem the alert doesn't do anything

I want to redirect to Aries.html#AriesMonth but currently it's redirecting to Aries.html (shows in the url Aries.html#AriesMonth ) but not to the place where <h1 id="AriesMonth" name="AriesMonth"/> in the page of Aries

second problem is that alert doesn't do anything. If Im not choosing one or both of the radio buttons I want to activate an alert message but currently it redirects to undefined page. Why?

 function redirectFunction() { // var href = document.getElementById("sign").getAttribute('href'); var href = $("input[name='sign']:checked").val() + ".html"; window.location.href = href + "#" + $("input[name='sign']:checked").val() + $("input[name='period']:checked").val(); if (href == "undefined.html" || $("input[name='sign']:checked") == false || $("input[name='period']:checked") == false) alert("please select sign and and horoscope"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div id="section"> <h3 for="horoscope">choose horoskop</h3> <table> <tr> <td> <input type="radio" name="period" value="Week" id="period" /> <b>שבועית</b> </td> <td> <input type="radio" name="period" value="Month" id="period" /> <b>חודשית</b> </td> <td> <input type="radio" name="period" value="Year" id="period"> <b>שנתית</b> </td> </tr> </table> <table> <tr> <th><input type="radio" value="Aries" name="sign" /> <a id="sign" href="Aries.html" />Aries</th> </tr> <tr> <td> <a name="signImage" value="Aries" href="Aries.html"> </tr> </table> <p><button onclick="redirectFunction()" id="redirect">get horoscope</button> </p> 

Answer 1

Move the alert before the url change - nothing will be executed after a location change

Also use an eventListener

Also your HTML was not complete/valid

 function redirectFunction() { var href = $("input[name='sign']:checked").val() + ".html"; if (href == "undefined.html" || !$("input[name='sign']").is(":checked") || !$("input[name='period']").is(":checked")) { alert("please select sign and and horoscope"); } else { href += "#" + $("input[name='sign']:checked").val() + $("input[name='period']:checked").val() console.log(href) // window.location.href = href; // uncomment when happy } } $("#redirect").on("click", redirectFunction); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="section"> <h3 for="horoscope">choose horoskop</h3> <table> <tr> <td> <input type="radio" name="period" value="Week" id="period" /> <b>שבועית</b> </td> <td> <input type="radio" name="period" value="Month" id="period" /> <b>חודשית</b> </td> <td> <input type="radio" name="period" value="Year" id="period"> <b>שנתית</b> </td> </tr> </table> <table> <thead> <tr> <th><input type="radio" value="Aries" name="sign" /> <a id="sign" href="Aries.html" />Aries</th> </tr> </thead> <tbody> <tr> <td> <a name="signImage" value="Aries" href="Aries.html">Aries</a> </td> </tr> </tbody> </table> <p><button id="redirect">get horoscope</button> </p> 

Answer 2

Period value is not validated, if period is not selected then it will be undefined and your # will be #signundefined. This is the reason behind not scrolling to # location.

Secondly, your location set happens 1st, even though sign value undefined it redirects. so put it inside if else.

  function redirectFunction() { var value = $("input[name='sign']:checked").val(), href = value + ".html"; if (href == "undefined.html" || $("input[name='sign']:checked") == false || $("input[name='period']:checked") == false) { alert("please select sign and and horoscope"); } else { window.location.href = href + "#" + value + $("input[name='period']:checked").val(); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div id="section"> <h3 for="horoscope">choose horoskop</h3> <table> <tr> <td> <input type="radio" name="period" value="Week" id="period" checked/> <b>שבועית</b> </td> <td> <input type="radio" name="period" value="Month" id="period" /> <b>חודשית</b> </td> <td> <input type="radio" name="period" value="Year" id="period"> <b>שנתית</b> </td> </tr> </table> <table> <tr> <th><input type="radio" value="Aries" name="sign" /> <a id="sign" href="Aries.html" />Aries</th> </tr> <tr> <td> <a name="signImage" value="Aries" href="Aries.html"> </tr> </table> <p><button onclick="redirectFunction()" id="redirect">get horoscope</button> </p>