实现按钮与输入框交互并将输入内容打印至控制台

你的代码存在几个关键问题，导致无法正确获取输入框内容并打印：

• 事件绑定错误：你给输入框绑定了click事件，且事件处理函数传入的是DOM元素而非函数，实际应该给按钮绑定点击事件来触发逻辑。
• 变量与参数冲突：guess函数的参数myInput和全局的myInput变量重名，且调用函数时未传递参数，导致控制台打印undefined。
• 未获取输入框实际值：即使参数传递正确，你也没有获取输入框的value属性，无法拿到用户输入的内容。

修正后的代码方案 #

JavaScript代码（config.js）

const myInput = document.getElementById("myInput");
const guessButton = document.getElementById("button");

function guess() {
  // 打印输入框的内容
  console.log(myInput.value);
}

// 给按钮绑定点击事件，触发guess函数
guessButton.addEventListener("click", guess);

HTML代码

<h1 id="random">Random Number guesser</h1>
<h2>Guess a number below between 1 - 100.</h2>
<div>
  <button id="button">Guess!</button>
  <input id="myInput" type="text">
</div>
<script src="config.js"></script>

另一种方案（保留onclick属性） #

如果想保留HTML中的onclick绑定，可这样修改：

JavaScript代码

function guess() {
  const inputValue = document.getElementById("myInput").value;
  console.log(inputValue);
}

HTML代码

<h1 id="random">Random Number guesser</h1>
<h2>Guess a number below between 1 - 100.</h2>
<div>
  <button id="button" onclick="guess()">Guess!</button>
  <input id="myInput" type="text">
</div>
<script src="config.js"></script>

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