单击比率按钮时动态显示元素/标签

时间：2019-11-12 00:09:51

标签： javascript

我正在尝试隐藏mailingaddress框和标签，还隐藏评论框和标签。仅当我单击单选按钮“邮件”（首选）时，它们才会显示，而当我切换到另一个按钮/选择时，这些标签和字段将再次被隐藏。注释也一样-当我单击“服务条款”的“我接受”时，注释框和标签将会显示，如果我取消选中它，则该框和标签会消失。我成功隐藏了它们，但是当我单击“邮件”按钮时不能再次显示它们，也不能在单击“服务条款”的“我接受”时显示注释框和标签。我哪里出错了？

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>

3 个答案:

答案 0 :(得分：1)

实际上，您不需要JavaScript即可实现。您可以在纯CSS中完成此操作。但是首先要回答您的问题，问题是您将click事件附加到了标签上，并且仅在单击输入时才调用该函数。因此，如果单击“电子邮件”，“电话”或其他标签，则不会调用该函数，因此不会隐藏元素。

以下是仅使用CSS的示例：

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 (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("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 (document.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;
}


/* Hide elements on load */

#mailingaddress,
#mailadress-label,
#comments-label,
#comments {
  display: none;
}


/* Show elements when #mail is checked */

#mail:checked~#mailingaddress,
#mail:checked~#mailadress-label {
  display: block;
}


/* Show comments when #terms is checked */

#terms:checked~#comments-label,
#terms:checked~#comments {
  display: block;
}
<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" id='mailadress-label'>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" id='comments-label'>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>

答案 1 :(得分：1)

  1. 您没有用于其他无线电输入的事件侦听器，因此不会运行任何代码。 添加这些：
document.getElementById("email").addEventListener("click", displayMailOption);
document.getElementById("mphone").addEventListener("click", displayMailOption);
document.getElementById("none").addEventListener("click", displayMailOption);

现在，每次无线电输入更改时，您的displayMailOption函数将运行。

  1. 修复错字并选择正确的元素后，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";
    }
}
  1. 修复评论侦听器ID：
document.getElementById("terms").addEventListener("click", displayCommentOption);
  1. 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";
    }
}

答案 2 :(得分：1)

jQuery('input[type=radio]').change(function(){
  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";
  }
})


document.getElementById("terms").addEventListener("click", 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";
  }
}
相关问题
最新问题