что-то происходит, когда я добавляю .значение в разных местах

#javascript #dom

#язык JavaScript #дом

Вопрос:

поэтому я попытался добавить .значение в двух разных местах, и я просто хотел бы знать, почему

HTML-код :

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8" /gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /gt;  lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /gt;  lt;link rel="stylesheet" href="style.css" /gt;  lt;titlegt;Guess My Number!lt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;headergt;  lt;h1gt;Guess My Number!lt;/h1gt;  lt;p class="between"gt;(Between 1 and 20)lt;/pgt;  lt;button class="btn again"gt;Again!lt;/buttongt;  lt;div class="number"gt;?lt;/divgt;  lt;/headergt;  lt;maingt;  lt;input type="number" class="guess" name="number" /gt;  lt;button class="btn check"gt;Check!lt;/buttongt;  lt;script src="script.js"gt;lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

код 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) })  

результат: будет регистрировать входное значение

Комментарии:

1. В вашем первом примере записывается входное значение, но оно пустое, потому что вы сохранили значение один раз до ввода каких-либо входных данных. Во втором примере элемент ввода сохраняется, а затем извлекается его значение в обработчике щелчка.

2. @pilchard да, большое спасибо, теперь я все понимаю, спасибо

Ответ №1:

В первом случае он получает значение при загрузке страницы, во втором, когда вы нажимаете кнопку, он снова получает значение, обновленное с помощью ввода