如何为输入框赋值给变量并导出？搜索引擎跳转异常求助（附代码）

一、修复谷歌搜索跳转失效问题 #

你的代码存在几个错误导致跳转失败：

• 跳转URL拼接的是searchField元素而非你赋值的变量s
• submit按钮默认会触发表单提交刷新页面，必须阻止该默认行为
• 标签闭合错误：<script>的结束标签写成了</style>
• 变量s未声明，建议用let/const避免全局污染

修复后的完整代码：

<!doctype html>
<script>
function show(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
    // 获取输入框值并赋值给变量
    const searchValue = document.getElementById('searchForm').searchField.value;
    // 跳转到谷歌搜索页，用encodeURIComponent处理特殊字符
    window.location.replace(`https://www.google.com/search?q=${encodeURIComponent(searchValue)}`);
}
</script>
<form id="searchForm">
    <input type="search" name="searchField" placeholder="Search QuickSearch">
    <input type="submit" value="Search" onclick="show(event)">
</form>

二、输入框值赋值给变量并导出 #

1. 基础变量赋值 #

直接获取输入框值绑定到变量，如需全局可用，可声明在函数外部：

// 全局变量，其他地方可直接调用
let globalSearchValue;

function show(event) {
    event.preventDefault();
    globalSearchValue = document.getElementById('searchForm').searchField.value;
    // 后续逻辑...
}

2. ES6模块导出（适用于模块化开发） #

如果页面使用ES6模块（script标签添加type="module"），可以导出变量供其他模块使用：

<!doctype html>
<script type="module">
let searchValue;

// 导出获取值的方法
export function getSearchValue() {
    return searchValue;
}

function show(event) {
    event.preventDefault();
    searchValue = document.getElementById('searchForm').searchField.value;
    window.location.replace(`https://www.google.com/search?q=${encodeURIComponent(searchValue)}`);
}
</script>
<form id="searchForm">
    <input type="search" name="searchField" placeholder="Search QuickSearch">
    <input type="submit" value="Search" onclick="show(event)">
</form>

其他模块可通过import { getSearchValue } from './当前文件名.js'获取该值。

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