文本输入不起作用

我有一个表单，如果选择了这个选项，就会弹出一个特定的文本输入。我不知道为什么，但当我选择Phone时，弹出的文本输入不会让我在上面写任何内容。

这是代码：

function checkType() {
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var emailType = document.getElementById('emailType');
var phoneType = document.getElementById('phoneType');
if (email.checked) {
emailType.style.opacity = "1";
emailType.style.height = "3em";
phoneType.style.opacity = "0";
phoneType.style.height = "0";
} else if (phone.checked) {
emailType.style.opacity = "0";
emailType.style.height = "0";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}
}
function showMessage(event) {
event.preventDefault();
var myForm = event.target;
myForm.style.opacity = "0";
myForm.style.height = "0";
myForm.style.transition = ".5s";
document.getElementById('submitted').style.opacity = "1";
document.getElementById('submitted').style.transition = "2s";
}
document.getElementById('myForm').addEventListener("submit", showMessage);

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Bitter');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*Navigation Styles*/
nav {
background-color: #AC3931;
text-align: right;
margin-top: -100px;
}
nav a {
color: #f6f7eb;
line-height: 2em;
text-decoration: none;
}
/*I made the links' font size in the nav bar bigger. I thought it was too small. I hope that's okay*/
nav li {
font-size: 1.5em;
list-style-type: none;
font-family: 'Bitter', serif;
display: inline-block;
padding: 10px;
font-weight: bold;
}
nav a:hover {
color: black;
}
/*Navigation Styles end*/
/*Header Styles*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: #E18335;
line-height: .2em;
padding-top: 1em;
}
/*Header styles end*/
.pgh {
color: black;
}
/*Images Styles*/
.logo-image {
position: relative;
left: 20px;
top: 0px;
background-color: white;
border: solid 2px #beb7a4;
height: 111px;
width: 115px;
}
.banner-image {
width: 960px;
height: 250px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img3 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img4 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
}
.socialIcon {
width: 40px;
height: 40px;
}
.contactImage {
height: 350px;
width: 450px;
}
/*Images Styles end*/
#content {
width: 960px;
margin: 0 auto;
border-right: 1px solid gray;
border-left: 1px solid gray;
padding-left: 20px;
padding-right: 20px;
background-color: white;
}
#sec1 {
padding: 10px;
}
#sec2 {
background-color: #FBFFB9;
padding: 10px;
}
#sec3 {
text-align: center;
padding: 50px;
}
#calmFont {
font-family: 'Indie Flower', cursive;
}
#intenseFont {
font-family: 'Permanent Marker', cursive;
}
.leftcol {
width: 45%;
float: left;
padding: 10px;
}
.rightcol {
width: 45%;
float: right;
padding: 10px;
}
.nameClassCopy {
float: left;
}
.socialIcons {
float: right;
}
footer {
background-color: #AC3931;
}
body {
background-color: #FFBC42;
}
#emailType {
opacity: 0;
height: 0;
transition: .5s;
}
#phoneType {
opacity: 0;
height: 0;
transition: .5s;
}
#contactPgh {
font-size: 20px;
}
p {
font-family: 'Josefin Sans', sans-serif;
}
#normalFont {
font-family: 'Josefin Sans', sans-serif;
}
#submit {
background-color: #AC3931;
border-radius: 15px 10px;
padding: 10px;
color: white;
box-shadow: 5px 5px 1px #ccc;
}
#submit:hover {
background-color: #FFBC42;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Dry Oar | Contact Us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- import the webpage's javascript file -->
</head>
<body>
<div id="content">
<header>
<img class="logo-image" alt="Logo Picture" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fdryoarlogo%20copy%202.png?1526759445079">
<br>
<nav>
<ul>
<li>&nbsp;<a href="index.html">| Home</a></li>
<li><a href="rivers.html">| Rivers</a></li>
<li><a href="contact-us.html">| Contact Us &nbsp; |</a></li>
</ul>
</nav>
<br>
<img class="banner-image" alt="Banner" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FredContactBanner.jpg?1531435849381">
<br>
</header>
<div id="normalFont">
<br>
<section id="sec3" class="clearfix">
<h1 style="font-family: 'Josefin Sans', sans-serif;">
Need more information?
</h1>
<p id="contactPgh">
Questions about pricing, location, equipment rental, scheduling or anything else?! Let us know!
</p>
</section>
<!-- Section Two -->
<section id="sec1" class="clearfix">
<!-- Left column -->
<div class="leftcol" style="border-right: 1px solid gray;">
<form id="myForm">
First Name:
<input type="text" placeholder="Arthur" required>
<br>
<br> Last Name:
<input type="text" placeholder="Figueiredo" required>
<br>
<br> Do you prefer to be contacted by e-mail or phone?
<br>
<input type="radio" name="contactType" id="email" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Femail-icon.png?1531433209873"> E-Mail
<br>
<input type="radio" name="contactType" id="phone" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fphone-icon.png?1531433375571"> Phone
<br>
<div id="emailType">
E-Mail: &nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" placeholder="example@email.com">
</div>
<div id="phoneType">
Phone number:
<input type="text" placeholder="(111)222-3333">
</div>
Your Message:
<br>
<br>
<textarea rows="10" cols="40" id="message" placeholder="Your message here . . ." required></textarea>
<br>
<br>
<input type="submit" id="submit">
</form>
<div id="submitted" style="opacity: 0">
<h2>Thank you for contacting us</h2>
<p>We will get back to you shortly.</p>
</div>
</div>
<!-- Right column -->
<div class="rightcol">
<img class="contactImage" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FcontactLast.png?1531436124712">
</div>
</section>
<br>
</div>
<footer class="clearfix">
<hr>
<div class="NameClassCopy">
&copy; Dry Oar 2018 || Arthur Figueiredo WDD 100‐02
</div>
<div class="socialIcons">
<a href="#" target="_blank"><img class="socialIcon" alt="Facebook Page" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FFacebookYellow.png?1531436293112"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" target="_blank"><img class="socialIcon" alt="Youtube Channel" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FyoutubeYellow.png?1531436475201"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" target="_blank"><img class="socialIcon" alt="WhatsApp" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FwppYellow.png?1531436410371"></a>
</div>
</footer>
</div>
</body>
</html>

此外，当我选择电话并只键入一些内容时，它不会进入电话文本输入框，但当我单击电子邮件选项时，我键入的内容都会出现在其文本输入框中。

如果选择了电话选项，我曾尝试禁用电子邮件文本输入，但不起作用。有什么建议吗？

将不透明度更改为display:none仍然不能解决他的实际问题。从上面的代码中，他试图访问一个未定义的DOM对象。这将导致Javascript返回一个错误undefined。只需在脚本中定义emailType和phoneType，就可以完成了，兄弟。我的意思是：

var emailType = document.getElementById('emailType');

和

var phoneType = document.getElementById('phoneType');

只需将这两行添加到CCD_ 5条件之前。您现在可以选择是否使用不透明度。。。。。。

我认为这种代码可以解决这个问题：

if (email.checked) {
document.getElementById("phoneType").style.display = "none";
document.getElementById("emailType").style.display = "";
emailType.style.opacity = "1";
emailType.style.height = "3em";
} else if (phone.checked) {
document.getElementById("emailType").style.display = "none";
document.getElementById("phoneType").style.display = "";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}

相关内容

最新更新

热门标签：