如何不使用event listener获取表单输入值并赋值给query变量

你当前代码里直接执行console.log(search.value)是在页面加载完成时就运行了，此时输入框还没有用户输入的内容，所以控制台无输出。要拿到用户输入的值，必须在用户完成输入或触发动作（比如点击搜索按钮）的时机去读取输入框内容。以下是几种无需调用addEventListener的实现方案：

方案1：使用内联onsubmit事件绑定表单提交逻辑 #

直接在表单元素上绑定提交事件，不用在JS中单独添加监听：

修改后的HTML #

<form class="searchBar" id="form" onsubmit="handleSubmit(event)">
     <input type="text" id="search" name="search" placeholder="Search">
     <button type="submit" id="submit">
     <svg style="width:24px;height:24px" viewBox="0 0 24 24">
          <path fill="#666666" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
    </svg>
</form>

对应的JavaScript #

const search = document.getElementById('search');
let query;

function handleSubmit(event) {
    event.preventDefault(); // 阻止表单默认刷新行为
    query = search.value; // 将输入值赋值给query变量
    console.log(query); // 验证赋值结果
    search.value = ""; // 清空输入框
}

方案2：实时同步输入值到query变量 #

如果想在用户输入过程中就把值同步到query，可以给输入框绑定内联oninput事件：

修改后的HTML #

<input type="text" id="search" name="search" placeholder="Search" oninput="updateQuery()">

对应的JavaScript #

const search = document.getElementById('search');
let query;

function updateQuery() {
    query = search.value;
    console.log(query); // 实时打印当前输入值
}

方案3：绑定按钮点击事件读取值 #

跳过表单提交逻辑，直接给搜索按钮绑定onclick事件：

修改后的HTML #

<button type="button" id="submit" onclick="getSearchValue()">

对应的JavaScript #

const search = document.getElementById('search');
let query;

function getSearchValue() {
    query = search.value;
    console.log(query);
    search.value = "";
}

关键说明 #

完全不依赖任何事件监听是不可能实现的——输入框的值是用户动态输入的，必须在用户触发的事件时机去读取，否则只能拿到页面加载时的空值。如果保留表单默认提交行为，页面会刷新导致JS变量丢失，因此必须用event.preventDefault()阻止默认行为。

内容的提问来源于stack exchange，提问作者Alan