如何在JavaScript的if-else语句中使用两个函数作为判断条件

问题核心 #

你之前的写法存在两个关键错误：

• enterPressed和buttonClicked是事件绑定函数，它们的作用是给元素添加监听逻辑，本身返回undefined，所以if (enterPressed == true || buttonClicked == true)这个判断永远不会成立。
• start()函数仅在页面初始化时执行一次，不会持续监听后续的按键或点击事件。

正确思路是：把需要执行的共同操作抽成独立函数，让回车事件和按钮点击事件都调用这个函数，实现触发任一操作都执行指定逻辑的效果。

修正后的代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-bar" class="input-group custom-search">
  <input id="searchBox" type="text" value="" class="form-control custom-search-input" placeholder="Search for product/material">
  <button id="searchBtn" class="btn btn-primary custom-search-botton" type="submit">Search</button>
</div>

JavaScript部分

// 定义需要执行的共同操作
function handleSearch() {
  const inputContent = $('#searchBox').val();
  alert(`You entered some information!! 输入内容：${inputContent}`);
  // 这里可添加实际的搜索业务逻辑
}

// 绑定回车事件：仅监听搜索输入框的回车按键
$('#searchBox').on('keyup', function(e) {
  if (e.keyCode === 13) {
    handleSearch();
  }
});

// 绑定按钮点击事件
$('#searchBtn').click(function() {
  handleSearch();
});

额外说明 #

• 直接监听searchBox的按键事件比监听整个文档更精准，避免其他输入框的回车操作误触发当前逻辑。
• 将重复逻辑抽成独立函数，既符合代码复用原则，也方便后续统一修改维护。

内容的提问来源于stack exchange，提问作者e-driver1