javascript - 文本输入不起作用

我有这样的表单，如果选择此选项，则会弹出特定的文本输入。我不知道为什么，但是当我选择电话时，弹出的文本输入不允许我在上面写任何内容。

代码如下:

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');

只需在 if( 条件之前添加这两行即可。您现在可以选择是否使用不透明度......

关于javascript - 文本输入不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51335592/

javascript - 文本输入不起作用

上一篇：javascript - 自动设置输入值

下一篇：javascript - 如何使用jquery从Javascript中提取特定的数据字段？