así que traté de agregar .value en dos ubicaciones diferentes y me gustaría saber por qué
Código 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>codigo 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) })resultado: no registrará el valor de la entrada
codigo 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) })resultado: registrará el valor de la entrada
En el primer caso, obtiene el valor cuando se carga la página, en el segundo, cuando hace clic en el botón, obtiene el valor nuevamente, actualizado desde la entrada