将两个事件监听器添加到一个表单中的两个提交按钮

Question

我有一个带有 2 个提交按钮的表单，我想为每个按钮添加一个不同的点击事件侦听器，并为每个按钮执行不同的操作。但是第二个不起作用，该功能不会触发。我是 JS 的新手，所以欢迎任何帮助。提前致谢。我的代码是： HTML

<form id="searching" action="javascript:void(0);">
              <input class="form-class w-50" type="text" id="search" placeholder="Input your search keyword" name="search">
              <br><br>
              <input type="submit" class="btn btn-warning" id="submit" value="Weather" name="weather">
              <input type="submit" class="btn btn-warning" id="submit2" value="Forecast!" name="forecast">
</form>

JS

const submit = document.getElementById('submit');
submit.addEventListener('click', event.getSearch.bind(this,'search'));

const submit2 = document.getElementById('submit2');
submit2.addEventListener('click', event.getForecast.bind(this));

Answer 1

您指定的行为在原则上工作正常，因此可能只需要确保您要调用的函数确实被调用（并在适当的上下文中调用）。

（由于您正在调用自定义函数而不是实际提交表单，您还可以考虑将 submit 输入更改为普通按钮，甚至可能完全省略 form 元素。）

const
  submit = document.getElementById('submit'),
  submit2 = document.getElementById('submit2');
submit.addEventListener('click', getSearch);
submit2.addEventListener('click', getForecast);

function getSearch(){ console.log("searching..."); }
function getForecast(){ console.log("forecasting..."); }

<form id="searching" action="javascript:void(0);">
  <label for="search">Search </label><input id="search"/><br><br>
  <input type="submit" id="submit" value="Weather"/>
  <input type="submit" id="submit2" value="Forecast!"/>
</form>

将两个事件监听器添加到一个表单中的两个提交按钮

Add two eventlisteners to two submit buttons in one form

javascript

submit

addeventlistener