javascript - 单击单选按钮时动态显示元素/标签

Question

我试图隐藏邮寄地址框和标签，并隐藏评论框和标签。仅当我单击单选按钮“邮件”(第一个选择)时，它们才会显示，当我切换到另一个按钮/选择时，这些标签和字段将再次隐藏。评论也是如此 - 当我点击服务条款的“我接受”时 - 评论框和标签将显示，如果我取消选中它，该框和标签就会消失。我成功隐藏了它们，但当我点击邮件按钮时，我无法让它们再次出现，当我点击服务条款的“我接受”时，我也无法让评论框和标 checkout 现。我哪里出错了？

var $ = function(id) { return document.getElementById(id); };

var processEntries = function() {
	var isValid = true;

	// get values for user entries 
    var email = $("email_address").value;
    var phone = $("phone").value;
    var country = $("country").value;
    var terms = $("terms").checked; //return true or false indicates whether a check box is checked or not
	
	//remove validity messages if there is any
	$("email_address").nextElementSibling.textContent  = "";	
	$("phone").nextElementSibling.textContent  = "";
	$("country").nextElementSibling.textContent  = "";
	$("terms").nextElementSibling.textContent  = "";	
	
	// check user entries for validity
    if (email === "") {
        $("email_address").nextElementSibling.textContent = "This field is required.";
		isValid = false;	
    }
	
	if (phone === "") {
        $("phone").nextElementSibling.textContent  = "This field is required.";
		isValid = false;
    }
	
    if (country === "") {
        $("country").nextElementSibling.textContent  = "Please select a country.";
		isValid = false;
    }
	
	if (terms === false) {
        $("terms").nextElementSibling.textContent  = "This box must be checked.";
		isValid = false;
    }
	
    if(isValid)
	{
		$("registration_form").submit();  //submit registration form
	}
};

var resetForm = function() {
    $("registration_form").reset();
	$("email_address").nextElementSibling.textContent = "*";
	$("phone").nextElementSibling.textContent = "*";	
	$("country").nextElementSibling.textContent = "*";	
	$("terms").nextElementSibling.textContent = "*";
    $("email_address").focus();
};

$("register").onclick = processEntries;
$("reset_form").onclick = resetForm;

//step 1: hide mailingaddress box and label, hide comments box and label
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";

document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";

//step 2: define event handler function and add event listener to hide or show mailing address box and label when radio buttons are clicked. 
//show mailing addess box and label only when mail button is clicked, when other buttons are clicked, hide mailing address box and label
document.getElementById("mail").addEventListener("click", displayMailOption);
function displayMailOption() {
	if (documenet.getElementById("mail").checked){
	  document.getElementsByTagName("label")[4].style.display = "block";
	  document.getElementById("mailingaddress").style.display = "block";
  } else {
	  document.getElementsByTagName("label")[4].style.display = "none";
	  document.getElementById("comments").style.display = "none";
  }
}

//step 3: define event handler functionn and add event listener to hide or show comment box and label when check box is clicked. 
//show comment box and label only when check box is checked. when check box is unchecked, hide comment box and label
document.getElementById("comments").addEventListener("click", displayCommentOption);
function displayCommentOption() {
	if (documenet.getElementById("comments").checked){
	  document.getElementsByTagName("label")[6].style.display = "block";
	  document.getElementById("mailingaddress").style.display = "block";
  } else {
	  document.getElementsByTagName("label")[6].style.display = "none";
	  document.getElementById("comments").style.display = "none";
  }
}

html {	background-image: url("ginkgo.jpg");}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: white;
	
    width: 730px;
    margin: 0 auto;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 { 
    font-size: 150%;
    color: blue;
    margin-bottom: .5em;
}
h2 {
    font-size: 120%;
    margin-bottom: .25em;
}
label {
    float: left;
    width: 9em;
}
input, select , textarea{
    width: 20em;
    margin-left: 1em;
    margin-bottom: 1em;
}
input[type="checkbox"],[type="radio"] { 
    width: 1em;
}

#registration_form span {
    color: red;
	font-size: 80%;
}

.hide {display: none;}
input[type="button"] {
  background-color: #000;
  border-radius: 5px;
  color: #fff;
  font-size: 1.2em;
  width: 100px;
  margin-right: 1.4em;}

input[type="button"]:hover {
  background-color: #666;
  cursor: pointer;
  text-shadow: 2px 2px 2px #000;
  box-shadow: inset 0 2px 2px #000;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Account Registration</title>
<link rel="stylesheet" type="text/css" href="register.css">

</head>

<body>
<main>
    <h1>Register for an Account</h1>
    <form action="register_account.html" method="get"
        name="registration_form" id="registration_form">
    
        <label for="email_address">E-Mail:</label>
            <input type="text" name="email_address" id="email_address">
            <span>*</span><br>
        <label for="phone">Mobile Phone:</label>
            <input type="text" name="phone" id="phone">
            <span>*</span><br>
        <label for="country">Country:</label>
            <select name="country" id="country">
            	<option value="">Select an option</option>
                <option>USA</option>
                <option>Canada</option>
                <option>Mexico</option>
            </select>
            <span>*</span><br>
        <label>Contact me by:</label>         
            <input type="radio" name="contact" id="mail" value="mail">Mail
            <input type="radio" name="contact" id="email" value="email">Email
			<input type="radio" name="contact" id="mphone" value="mobilephone">Mobile Phone
		    <input type="radio" name="contact" id="none" value="none">Don't contact me
        <br>
		 
		<label for="mailingaddress">Your Mailing Address:</label>
		<textarea id="mailingaddress"></textarea><br>
		
        <label>Terms of Service:</label>
            <input type="checkbox" name="terms" id="terms" value="yes">I accept
            <span>*</span><br>
	   	
		<label for="comments">Comments:</label>
		<textarea id="comments" cols='20'  rows='10' ></textarea><br>
		
		<label>&nbsp;</label>
        <input type="button" id="register" value="Register">
        <input type="button" id="reset_form" value="Reset">
    </form>
</main>
<script src="register.js"> </script>
</body>
</html>

Answer 1

1. 您没有其他 radio 输入的事件监听器，因此不会运行任何代码。 添加这些:

document.getElementById("email").addEventListener("click", displayMailOption);
document.getElementById("mphone").addEventListener("click", displayMailOption);
document.getElementById("none").addEventListener("click", displayMailOption);

现在，每次 radio 输入更改时，您的 displayMailOption 函数都会运行。

修正拼写错误并选择正确的元素后，displayMailOption 函数应如下所示:

function displayMailOption() {
    if (document.getElementById("mail").checked) {
        document.getElementsByTagName("label")[4].style.display = "block";
        document.getElementById("mailingaddress").style.display = "block";
    } else {
        document.getElementsByTagName("label")[4].style.display = "none";
        document.getElementById("mailingaddress").style.display = "none";
    }
}

修复评论监听器 ID:

document.getElementById("terms").addEventListener("click", displayCommentOption);

displayCommentOption 函数应如下所示:

function displayCommentOption() {
    if (document.getElementById("terms").checked) {
        document.getElementsByTagName("label")[6].style.display = "block";
        document.getElementById("comments").style.display = "block";
    } else {
        document.getElementsByTagName("label")[6].style.display = "none";
        document.getElementById("comments").style.display = "none";
    }
}