单击 <button> 的返回值是多少？

如何解决单击 <button> 的返回值是多少？

我想获取点击按钮的返回值，然后用它来做一个 if 语句。我在这里读到的关于人们试图这样做的所有答案要么是使用不再起作用的旧脚本非常旧，要么不是同一个案例。

function remove() {
  if (document.getElementById("removing").value == true) {

    document.getElementById("test").style.backgroundColor = "red";
  }
}

<div id="test">test</div>
<button id="removing" onclick="remove()">Remove a word</button>

我曾尝试使用 value 属性和 onclick，但在单击按钮时它们都不等于 true。

我尝试使用 alert 来显示 value，但它什么也没显示。

点击按钮是否真的返回了一个值，如果是，它是什么？

解决方法

调度 Javascript 事件处理程序总是返回 true，即使它返回 false，我们都知道这是用来防止事件的默认行为。我们通常不使用事件处理程序的返回值，甚至不为此返回任何内容。

在您的情况下，我认为您正在尝试访问 currentTarget 元素的值（在您的情况下为“删除”按钮）。为此，您可以使用事件对象，该对象作为参数传递给您的事件处理程序。

event.currentTarget 是一种引用在其上调度（触发）事件的元素的方法。就像在事件处理程序中使用 'this' 一样，除了它也适用于箭头函数。

所以做这样的事情：

function remove(event) {
  let button = event.currentTarget;
  if (buttton.value) {
   document.getElementById("test").style.backgroundColor ="red";
  }
}

在 HTML 中，

<div id="test">test</div>
<button id="removing" onclick="remove(event)">Remove a word</button>

注意我使用了 remove(event).

根据以下评论进行编辑： 使用 onclick 将要求您创建一个全局“删除”功能。 如果你这样做， '...onclick="remove(event)" 它基本上做的是创建下面的函数，基本上是一个包装器：

// In the global scope
[reference element].onclick = ()  => {
  remove(event);
}

所以你必须有一个全局的“删除”功能。所以这在模块中不起作用，因为每个模块都有自己的顶级范围。如果您计划处理复杂的项目，您将不得不使用模块。

注意在 html 中使用内联“onclick”属性对于下面评论的大量请求有以下缺点：

-关注点分离：您通常不想将 UI 逻辑（单击按钮时会发生什么）与演示文稿混淆。您希望在内容、样式和脚本之间进行明确划分。

-使用 onclick 只能分配一个处理程序。

-如果内联指定事件，则 JS 将指定为字符串（属性值始终为字符串）并在事件触发时进行评估。（额外的包装器代码在内部构建）。

- 正如我之前提到的，您面临着必须引用命名函数的问题。这并不理想，并且会影响需要全局化的函数，这会在您使用模块时真正让您反感。

简而言之，通过专用的 addEventListener API 集中处理事件。

,

DOM Event 由 EventListener 的 callback function 处理。

因此，如果由事件触发并由事件侦听器的 handleEvent 方法转发这样的处理程序函数，则始终将使用事件对象作为该函数的单个参数进行调用。

与此事件相关的所有信息均由事件本身携带。它的属性可以读取，有些甚至可以写入/更改。

从提供的示例中可以明显看出，OP 希望确保事件处理程序仅由特定的 html 元素触发。因此，任何有效的方法只需要查看事件的 currentTarget 属性 ...

// the way the OP might want to handle the problem.
function handleRemoveWord(evt) {
  const elmNode = evt.currentTarget;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node properties.
  if (
    (elmNode.tagName.toUpperCase() === 'BUTTON')
    && (elmNode.id === 'remove')
  ) {
    document
      .getElementById('test')
      .style.backgroundColor = 'red';
  }
}

// another way the OP might want to handle the problem.
function handleRemoveAnotherWord(evt) {

  // `this` referres to the element which got
  // bound to the handler via `addEventListener`.
  const targetNode = this;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node references.
  if (targetNode === evt.currentTarget) {
    document
      .getElementById('test')
      .style.backgroundColor = 'cyan';
  }
}

// an alternative way of solving the problem
// of always being assured about the correct
// element having triggering the event handling.
function handleRestoreWordWithBoundContext(evt) {
  const context = this;
  const { elmTest,elmRestore } = context;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node references.
  if (elmRestore === evt.currentTarget) {

    elmTest.style.backgroundColor = '';
  }
}


function initialize() {
  // the way(s) the OP might want to handle the problem.
  document
    .getElementById('remove')
    .addEventListener('click',handleRemoveWord);

  document
    .querySelector('#removeAnother')
    .addEventListener('click',handleRemoveAnotherWord);

  // an alternative way of soving the problem
  // of always being assured about the correct
  // element having triggering the event handling.
  const elmTest = document.querySelector('#test');
  const elmRestore = document.querySelector('#restore');

  elmRestore.addEventListener(
    'click',handleRestoreWordWithBoundContext.bind({
      elmTest,elmRestore,})
  );
}
initialize();

<div id="test">test</div>

<button id="remove">Remove a word</button>
<button id="removeAnother">Remove another word</button>
<button id="restore">Restore a word</button>

正如人们可能已经注意到的那样，该示例具有第三个按钮和另一种实现事件处理程序的方式。此附加处理程序假定其 this 上下文来携带附加信息。这可以通过在此处理程序函数上调用 bind 并准确提供想要作为事件处理程序 this 上下文呈现的信息来实现。每次调用此函数特定方法时，它都会创建另一个函数，该函数确实可以通过 this 关键字访问绑定信息。

,

只需将点击按钮的背景颜色更改为：

function remove() {
  document.getElementById("test").style.backgroundColor = "red";
}

<div id="test">test</div>
<button id="removing" onclick="remove()">Remove a word</button>