html表單中的基本onclick按鈕-有解無憂

當我在表單中放置一個基本的 onclick 按鈕時，它不起作用：（即使使用 type="button"）

function action(div) {
  var x = document.querySelector(div);
  if (x.style.display == 'block') {
    x.style.display = 'none';
  } else {
    x.style.display = 'block';
  }
}

<form method="post">
  <button type="button" class="trigger" onclick="action('.popup')">click</button>
  <div class="popup">
    <p>popup</p>
    <div>
</form>

但是這個相同的按鈕確實有效：

function action(div) {
  var x = document.querySelector(div);
  if (x.style.display == 'block') {
    x.style.display = 'none';
  } else {
    x.style.display = 'block';
  }
}

<form method="post">

</form>

<button type="button" class="trigger" onclick="action('.popup')">click</button>
<div class="popup">
  <p>popup</p>
  <div>

我可以讓它作業在表格中嗎？

uj5u.com熱心網友回復：

action不能是任何形式的函式的名稱。
為您的函式使用其他名稱，它將按您的預期作業

function myAction(cssRef)
  {
  document.querySelector(cssRef).classList.toggle('noDisplay')
  }

.noDisplay {
  display : none;
  }

<form method="post">
  <button type="button" onclick="myAction('.popup')">click</button>
  <div class="popup">
    <p>popup</p>
    <div>
</form>

uj5u.com熱心網友回復：

表單中按鈕的默認行為是將表單提交到服務器（或表單的任何操作。在您的情況下，它將表單元素發布到相同的 url）。該按鈕正在作業，但隨后頁面會立即重新加載，因此您看不到它。

您需要阻止按鈕處理程式中的默認操作。您通常可以通過回傳 false 來做到這一點，但preventDefault更好。在這里，我展示了兩者都做：

 <button type="button" class="trigger" 
    onclick="action(event, '.popup'); return false;">click</button>

function action(e, div) {
  e.preventDefault();
  var x = document.querySelector(div);
  if (x.style.display == 'block') {
    x.style.display = 'none';
  } else {
    x.style.display = 'block';
  }
}

uj5u.com熱心網友回復：

這是一個稍微不同的解決方案，也是基于阻止默認表單提交的沖動。

我正在使用自定義屬性使代碼更具可讀性。

document.querySelector('.trigger').addEventListener('click', action);


function action(e) {
  e.preventDefault();
  var x = document.querySelector(e.target.getAttribute('toggle-data'));
  if (x.style.display == 'block') {
    x.style.display = 'none';
  } else {
    x.style.display = 'block';
  }
}

<form method="post">
  <!-- toggle-data is read on click event and used to toggle a popup -->
  <button type="button" toggle-data=".popup" class="trigger">click</button>
  <div class="popup">
    <p>popup</p>
    <div>
</form>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/482972.html

標籤：html 形式按钮

上一篇：如何在GUI中只運行一次函式

下一篇：PHP標頭位置-防止Chrome提示保存密碼