该功能无法重定向到正确的位置，并且警报不起作用

Question

我尝试重定向到sign.html＃signperiod，它仅重定向到页面本身

警报不起作用的第二个问题

我想重定向到Aries.html＃AriesMonth 但目前它正在重定向到Aries.html（显示在网址Aries.html＃AriesMonth中）  而不是白羊座页面中<h1 id="AriesMonth" name="AriesMonth"/>的地方

第二个问题是警报什么都不做。如果我没有选择一个或两个单选按钮，我想激活警报消息，但是当前它重定向到未定义页面。为什么？

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

在更改网址之前移动警报-更改位置后将不执行任何操作

还使用一个eventListener

您的HTML也不完整/无效

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>