html 形式的基本 onclick 按钮

Question

当我在表单中放置一个基本的 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>

我可以把它变成表格吗？

Answer 1

表单中按钮的默认行为是将表单提交到服务器（或表单的任何 ACTION 是什么。在您的情况下，它将 post 表单元素提交给相同的 url).该按钮可以使用，但随后页面会立即重新加载，因此您看不到它。

您需要在按钮处理程序中阻止默认操作。您通常可以通过返回 false 来做到这一点，但 preventDefault 更好。在这里，我展示了两者：

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

js

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

Answer 2

这里有一个稍微不同的解决方案，也是基于防止默认表单提交的冲动。

我正在使用自定义属性来提高代码的可读性。

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>

Answer 3

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>

html 形式的基本 onclick 按钮

basic onclick button in a html form

html

forms

button