显示/隐藏元素 JavaScript答案

【问题标题】：Show/Hide elements JavaScript显示/隐藏元素 JavaScript
【发布时间】：2020-08-28 16:03:58
【问题描述】：

我正在尝试创建隐藏在每个页面上的表单。我想我必须为每个我想隐藏的按钮和表单创建一个单独的函数。所以我的逻辑是在不同的 JS 页面上使用相同的代码，但在每个 JS 页面上更改 id 和函数名称。

但是，当我这样做时，使用完全相同的代码按钮在一个页面上工作，而不是在另一页面上。

这是我正在尝试学习的许多层的开始，例如在同一页面上打开表单并使用 jQuery 将其转换为出现。

第一个代码是这样的，它可以工作，但我想追加并添加到它

<!DOCTYPE html>
<html lang="EN">
<meta charset="UTF-8">

<head>
  <title>button test</title>
  <script>
    window.onload = function() {
      document.getElementById("tkform").style.display = "none";
    }
    window.onload = function() {
      document.getElementById("cleanForm").style.display = "none";
    }

    function openForm() {
      document.getElementById("cleanForm").style.display = "block";

    }

    function closeForm() {
      document.getElementById("cleanForm").style.display = "none";
    }



    function optkForm() {
      document.getElementById("tkForm").style.display = "block";



    }

    function clstkForm() {
      document.getElementById("tkForm").style.display = "none";
    }
  </script>
</head>

<body>
  <h3>
    I am attempting to create forms that are hidden on each page. I figure I had to make a separate functions for each button and form that I wanted to hide. So my logic was to use the same code on separate JS pages but changing the id and function names
    on each JS page. However when I do so, using the exact same code the button works on one page and not on the other page. This is a start of many layers I'm trying to learn, such as opening form on same page and transition it to appear using jquery.
    1. The 1st code was this, it works but I would like to append and add to it
  </h3>
  <p>
    HTML
  </p>
  <button onclick="openForm()" style="font-size: 16px; text-align: center" ;>
            Get an Estimate</button>
  <button onclick="closeForm()">Close Form</button>
  <form class="cleanform" id="cleanForm" action="/action_page.php">
    <legend>Book a Visit</legend>

    <p>Please fill out your information below.</p>
    <br>

    <p id="text" style="display:none">Checkbox is CHECKED!</p>

    <div class="columns">
      <div class="item">
        <label for="fname">First Name<span>*</span></label>
        <input id="fname" type="text" name="fname" />
      </div>
      <div class="item">
        <label for="lname"> Last Name<span>*</span></label>
        <input id="lname" type="text" name="lname" />
      </div>
      <div class="item">
        <label for="eaddress">Email Address<span>*</span></label>
        <input id="eaddress" type="text" name="eaddress" />
      </div>
      <div class="item">
        <label for="zipcode">Zip Code<span>*</span></label>
        <input id="zipcode" type="text" name="zipcode" pattern="[0-9] {5}" title="5 digit Zip" />
      </div>
    </div>
    <fieldset>
      <legend style="background-color: rgb(221, 210, 210)">
        <p>Service Frequency</p>
      </legend>
      <div class="columns">
        <p>Is This a One-Time or Recurring Clean?</p>

        <div class="item">
          <br>
          <label for="myCheck">One-Time Cleaning</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">
          <label for="myCheck">Recurring Service</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">
        </div>
      </div>
      <div class="columns">
        <p>Do You need a Move In/Move Out clean?</p>

        <div class="item">
          <br>
          <label for="myCheck">Yes</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">
          <label for="myCheck">No</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">

        </div>
      </div>
    </fieldset>
    <div class="columns">
      <div class="item">
        <label for="bedrooms">Bedrooms:<span>*</span></label>
        <input type="number" id="bedrooms" name="bedrooms" min="0" ; max="8" ; name="bedroom" placeholder="0" />
      </div>
      <div class="item">
        <label for="bathroom">Bathrooms:<span>*</span></label>
        <input type="number" id="bathrooms" name="bathrooms" min="0" ; max="20" placeholder="0" />
      </div>
      <div class="item">
        <label for="sqrfoot">Square Foot:<span>*</span></label>
        <input type="text" id="sqrfoot" name="sqrfoot" placeholder="Total Square Foot">
      </div>
    </div>
    <input type="submit" name="Book Now">
  </form>
  <p style="background-color: yellow;">
    2. This is code that I copied and reformatted for use on a separate page, yet it does not work. What am I missing here?
  </p>
  <p>
    HTML
  </p>
  <button onclick="optkForm()">
    Open Form</button>

  <button onclick="clstkForm()">Close Form</button>

  <form class="tkform" id="tkform" method="post" action="URL_to_script">
    <fieldset>
      <legend>Turn Key Service</legend>
      <p>
        <label class="question" for="the_name">Name:</label>
        <input type="text" id="the_name" name="the_name" placeholder="Enter Your Full Name" size="24" />
      </p>
      <p>
        <label class="question" for="the_email">Email:</label>
        <input type="text" id="the_email" name="the_email" placeholder="Email" size="32" required/>
      </p>
      <p>
        <label class="question" for="the_addy">Address:</label>
        <input type="text" id="the_addy" name="the_addy" placeholder="Street Address" size="32" required/>
      </p>
      <p>
        <label class="question" for="the_zip">Zip:</label>
        <input type="text" id="the_zip" name="the_zip" placeholder="ZipCode" size="12" required pattern="[0-9] {5}" />
      </p>
      <p>
        <label class="question" for="the_name">Bedrooms:</label>
        <input type="number" id="bedrooms" name="bedrooms" min="0" max="8" size="2" required/>
      </p>
      <p>
        <label class="question" for="the_name">Bathrooms:</label>
        <input type="number" id="bathrooms" name="bathrooms" min="1" max="20" size="2" required/>
      </p>
      <p>

        <label class="question" for="sqft">Squarefoot:</label>
        <input type="text" id="sqft" name="squarefoot" placeholder="Sqrft" size="12" required/>
      </p>
      <p>

        <label class="question" for="the_message">Message:</label>
        <textarea id="the_message" name="the_message" placeholder="Enter Your Message Here" rows="7" cols="55" vertical-align="top">
      </textarea>
      </p>
    </fieldset>

    <button input type="submit">Submit</button>
    </div>
    </div>

  </form>
</body>

</html>

【问题讨论】：

问题的大部分描述似乎与代码混合在一起。请花一些时间来格式化问题并将代码 sn-ps 与问题描述分开。由于代码都是 HTML/CSS/JavaScript，您还可以将您的 sn-ps 转换为可运行的示例来演示问题，让我们看到您所看到的。
另见：stackoverflow.com/help/minimal-reproducible-example
抱歉，这是我的第一个问题，我无法理解格式。感谢您的意见

标签： javascript forms show-hide

【解决方案1】：

描述看起来混杂在一起。但是，如果您正在寻找为什么按钮不适用于“tkform”，那么您需要在号召性用语功能中更改“tkform”的id：

function optkForm() {
      document.getElementById("tkForm").style.display = "block";



    }

function clstkForm() {
      document.getElementById("tkForm").style.display = "none";
    }

或

以 HTML 描述形式

<form class="tkform" id="tkform" method="post" action="URL_to_script">
</form>

“tkform”和“tkForm”是两个不同的ID。

【讨论】：

我还找到了一个更好的代码，它给了我一个简单的（if/else）方法。我知道这一点，但想尝试其他方法。 ``` 函数 openForm() { var x = document.getElementById("cleanform"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } 函数 optkForm() { var x = document.getElementById("tkform"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }```
@damedozha 继续。真正的求知方法是实验。