当我在不同的位置添加 .value 时会发生一些事情答案

【问题标题】：something happens when I add .value in different locations当我在不同的位置添加 .value 时会发生一些事情
【发布时间】：2022-01-10 06:04:20
【问题描述】：

所以我尝试在两个不同的位置添加 .value 我只是想知道为什么

HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Guess My Number!</title>
  </head>
  <body>
    <header>
      <h1>Guess My Number!</h1>
      <p class="between">(Between 1 and 20)</p>
      <button class="btn again">Again!</button>
      <div class="number">?</div>
    </header>
    <main>
        <input type="number" class="guess" name="number" />
        <button class="btn check">Check!</button>
    <script src="script.js"></script>
  </body>
</html>

javascript代码1：

var input = document.querySelector(".guess").value
const check = document.querySelector(".check")
const message = document.querySelector(".message")
var score = document.querySelector('.score')
var highScore = document.querySelector('.highscore')

check.addEventListener("click", function(){
    console.log(input)
})

结果：不会记录输入的值

javascript代码2：

var input = document.querySelector(".guess")
const check = document.querySelector(".check")
const message = document.querySelector(".message")
var score = document.querySelector('.score')
var highScore = document.querySelector('.highscore')

check.addEventListener("click", function(){
    console.log(input.value)
})

结果：将记录输入的值

【问题讨论】：

您的第一个示例确实记录了输入的值，但它是空的，因为您在输入任何输入之前存储了一次值。第二个示例存储 输入元素，然后在您的点击处理程序中检索它的值。
@pilchard 是的，非常感谢，我现在明白了，谢谢

标签： javascript dom

【解决方案1】：

在第一种情况下，它在页面加载时获取值，在第二种情况下，当您单击按钮时，它再次获取值，从输入更新

【讨论】：