Show/Hide 个元素 JavaScript

Question

我正在尝试创建隐藏在每个页面上的表单。我想我必须为我想隐藏的每个按钮和表单创建一个单独的函数。所以我的逻辑是在不同的 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>

Answer 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。

Show/Hide 个元素 JavaScript

Show/Hide elements JavaScript

javascript

forms

show-hide