如果其他说明并显示内部HTML,但是在InnerHTML中使用URL,我该怎么办



忽略第一个表单框。我的目标是让用户使用第二种形式的radio-button单击他们喜欢的站。单击喜爱的电台并单击按钮应pop up并使用innerhtml给他们的URL到他们喜欢的电台。

只能选择一个喜欢的站。我只为第一个提供了真正的URL,因为您可以将其余的作为alert盒子进行测试,但以后会更改。我遇到错误,不知道如何处理if-else语句。请帮助谢谢。

<head>
    <meta charset="utf-8">
    <title> Lab 8</title>
    <script type="text/javascript">
        function radio() {
 var theMix = document.getElementById('mix');
var theDrive= document.getElementById('drive');
var theCountry= document.getElementById('country');
            if (document.getElementById("mix").checked) 
                {
                      document.getElementById("mix").innerHTML = "https://wtmx.com/";
                }
     else if (document.getElementById("drive").checked) {
         alert("www.yolo.com");
     }
else if (document.getElementById("country").checked) {
    alert("www.helloworld.com")
}
        }
    </script>
</head>
<body>
    <form>
        <p>List all the stations you listen to <br>
            <input type="checkbox" name="option1" value="A">The mix 101.9 <br>
            <input type="checkbox" name="option2" value="B">The Drive 97.1 <br>
            <input type="checkbox" name="option3" value="C">US 99 Country 99.5 <br>
        </p>
    </form>

    <form>
        <p>What is your favorite station?</p>
        <input type="radio" name="stations" id="mix" value="A">
        <label for="mix">The Mix 101.9</label><br>
        <input type="radio" name="stations" id="drive" value="B">
        <label for="drive">The Drive 97.1</label><br>
        <input type="radio" name="stations" id="country" value="C">
        <label for="country">US 99 Country 99.5 </label><br>
        <input type="button" value="Link To Favorite Station" onclick="radio()">
    </form>

</body>


</html>

Mix是输入元素 InnerHTML不支持。而且它的单选按钮。您需要更改标签不输入的文本值。因此,使用querySelector

选择attr选择
document.querySelector("label[for=mix]").innerHTML = "https://wtmx.com/";

function radio() {
  var theMix = document.getElementById('mix');
  var theDrive = document.getElementById('drive');
  var theCountry = document.getElementById('country');
  if (document.getElementById("mix").checked) {
    document.querySelector("label[for=mix]").innerHTML = "https://wtmx.com/";
  } else if (document.getElementById("drive").checked) {
document.querySelector("label[for=drive]").innerHTML = "https://wtmx.com/";
  } else if (document.getElementById("country").checked) {
document.querySelector("label[for=country]").innerHTML = "https://wtmx.com/";
  }
}
<form>
  <p>List all the stations you listen to <br>
    <input type="checkbox" name="option1" value="A">The mix 101.9 <br>
    <input type="checkbox" name="option2" value="B">The Drive 97.1 <br>
    <input type="checkbox" name="option3" value="C">US 99 Country 99.5 <br>
  </p>
</form>
<form>
  <p>What is your favorite station?</p>
  <input type="radio" name="stations" id="mix" value="A">
  <label for="mix">The Mix 101.9</label><br>
  <input type="radio" name="stations" id="drive" value="B">
  <label for="drive">The Drive 97.1</label><br>
  <input type="radio" name="stations" id="country" value="C">
  <label for="country">US 99 Country 99.5 </label><br>
  <input type="button" value="Link To Favorite Station" onclick="radio()">
</form>

相关内容

最新更新