如何在HTML頁面中顯示和隱藏表單？

我有一個 html 表單，它應該只在單擊提交按鈕后才會出現。我添加了簡單的 JavaScript 以在點擊時顯示相同的內容。

意圖是在單擊其上方的按鈕時顯示更新表單。誰能幫我找出我做錯了什么？

function showForm() {
  alert('Form has been submitted');
  document.getElementByClass(UpdateForm - section).style.display = 'block';
}

.UpdateForm-section.hidden {
  display: none;
}

<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
  <form action="" method="post" class="UpdateForm-section">
    <label>Car Name</label>
    <input type="text" value="" name="ev_name" placeholder="Model name"><br>
    <label>Manufacturer</label>
    <input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
    <label>Year</label>
    <input type="number" value="" name="ev_year" placeholder="YYYY"><br>
    <label>Battery size</label>
    <input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
    <label>Range</label>
    <input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
    <label>Cost</label>
    <input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
    <label>Power</label>
    <input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
    <br>
    <input type="submit" id="update_submit" value="Update details" name="submit_button" />
  </form>
</div>

uj5u.com熱心網友回復：

在您的代碼中嘗試以下更改。

在 CSS.hidden中： 從.UpdateForm-section.hidden

在 JS 中： 使用querySelector代替getElementByClass并將類的名稱括在引號中。

作業代碼：

function showForm() {
  alert('Form has been submitted');
  document.querySelector('.UpdateForm-section').style.display = 'block';
}

.UpdateForm-section {
  display: none;
}

<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
  <form action="" method="post" class="UpdateForm-section">
    <label>Car Name</label>
    <input type="text" value="" name="ev_name" placeholder="Model name"><br>
    <label>Manufacturer</label>
    <input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
    <label>Year</label>
    <input type="number" value="" name="ev_year" placeholder="YYYY"><br>
    <label>Battery size</label>
    <input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
    <label>Range</label>
    <input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
    <label>Cost</label>
    <input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
    <label>Power</label>
    <input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
    <br>
    <input type="submit" id="update_submit" value="Update details" name="submit_button" />
  </form>
</div>

uj5u.com熱心網友回復：

我建議您采用以下方法：在顯示元素時定義所需的樣式：

.UpdateForm-section {  // here we set the default style of the div -> not displayed
    display: none;
}
.UpdateForm-section.active {  // here the CSS selector is stronger, so it will override the previous statement
        display: block;
}

然后在您的 javascript 中，當您希望它顯示時，您只需將“活動”類添加到元素中：

function showForm() {
   alert('Form has been submitted');
   document.querySelector(".UpdateForm-section").classList.add('active');  // Prefer to use an id to select an unique element to avoid miss coding
}

uj5u.com熱心網友回復：

您只需要將表單保存在一個變數中，然后您就可以輕松地對其進行更改。您將需要.hidden從您的 CSS 中洗掉。

您需要使用form[0]，因為當您 make 時getElementsByClassName，您將獲得一個陣列：

function showForm() {
    alert('Form has been submitted');
    var form = document.getElementsByClassName("UpdateForm-section");
    form[0].style.display = 'block'
}

標籤：javascript html css

上一篇：二維陣列中的空專案有問題

下一篇：單擊觸發時框關閉