忽略第一个表单框。我的目标是让用户使用第二种形式的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>