本文介绍如何通过 html 表单与 javascript 事件监听配合，实现点击按钮时读取输入框值并打印到浏览器控制台，避免页面意外刷新，并提供可直接运行的完整示例。
本文介绍如何通过 html 表单与 javascript 事件监听配合，实现点击按钮时读取输入框值并打印到浏览器控制台，避免页面意外刷新，并提供可直接运行的完整示例。
要让按钮正确触发并获取输入框（<input>）的值输出到控制台，关键在于：合理绑定事件、正确获取输入值、阻止表单默认提交行为。你原始代码中存在几个典型问题：
-
onclick="guess()"未向函数传参，导致myInput参数为undefined； -
addEventListener("click", document.getElementById("myInput"))语法错误——第二个参数应为函数，而非 DOM 元素； - 输入框缺少
name属性，且未用<form></form>包裹，难以利用表单事件统一处理。
✅ 推荐做法是使用语义化 <form></form> 标签，并监听其 submit 事件。这样既能自然响应按钮点击（尤其当按钮在表单内且类型为 submit 时），又能通过 e.target 精准访问表单内各字段。
以下是可直接运行的完整方案：
HTML（index.html）：
<h1 id="random">Random Number guesser</h1> <h2>Guess a number below between 1 - 100.</h2> <form name="form01"> <button type="submit">Guess!</button> <input name="myInput" type="text" placeholder="Enter your guess (1–100)"> </form> <script src="config.js"></script>
JavaScript（config.js）：
document.forms.form01.addEventListener('submit', function(e) {
e.preventDefault(); // ⚠️ 必须！阻止页面刷新或跳转
const inputValue = e.target.myInput.value.trim();
if (inputValue === '') {
console.log('⚠️ Input is empty.');
return;
}
console.log('Your guess:', inputValue);
// ✅ 此处可进一步做数字校验、随机数比对等逻辑
});? 注意事项：
-
type="submit"是按钮在表单中触发表单提交的关键；若省略，需手动调用form.submit()或改用click事件监听按钮本身； -
e.target.myInput.value依赖<input>的name="myInput"—— 这是表单元素通过名称快速访问的核心机制； - 始终调用
e.preventDefault()，否则表单提交将导致页面重载，控制台日志一闪而过； - 使用
.trim()清除首尾空格，提升输入鲁棒性；建议后续增加isNaN()和范围校验（如parseInt(inputValue) >= 1 && ）。
该模式结构清晰、兼容性好（支持所有现代浏览器），是构建交互式表单的基础范式。掌握它，你就能轻松扩展为验证、API 请求或游戏逻辑等更复杂场景。
