Блог

Главная - Вопросы по программированию - .значение, не отображающее правильную информацию в JS

.значение, не отображающее правильную информацию в JS

#javascript #html

Вопрос:

Я пытаюсь захватить введенное пользователем значение из текстового поля ввода HTML. Если мне присвоено заданное статическое значение, оно позволяет мне отображать это значение, но это не то, что я хочу. Я хочу, чтобы пользователь ввел числовое значение и мог отображать/изменять это значение. Спасибо, что уделили мне время.

 <div class="stats">
    <label>
        Weight<input type="number" id="weight">
    <label>
</div>
<script>
/**
 * @type HTMLInputElement
 */
let weight = document.getElementById('weight').value;
console.log(weight/2.205);
</script>

Ответ №1:

Сценарий в этом теге сценария выполняется немедленно, один раз. При инициализации страницы входные данные пусты, и, следовательно, нет никакого значения.

Обычно у вас есть кнопка, которую пользователь нажимает после ввода чего-то, что запускает функцию с этой логикой:

 <div class="stats">
    <label>
        Weight<input type="number" id="weight">
    <label>
    <input type="button" value="press" onclick="update()">
</div>
<script>

function update() {
  /**
   * @type HTMLInputElement
   */
  let weight = document.getElementById('weight').value;
  console.log(weight/2.205);
}

</script>

Вам также может понадобиться консоль.журнал должен выполняться каждый раз при обновлении значения, и в этом случае вы можете использовать onchange атрибут непосредственно на входе, а не иметь отдельную кнопку с onclick 

 <div class="stats">
    <label>
        Weight<input type="number" id="weight" onchange="update()">
    <label>
    <input type="button" value="press">
</div>
<script>

function update() {
  /**
   * @type HTMLInputElement
   */
  let weight = document.getElementById('weight').value;
  console.log(weight/2.205);
}

</script>

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

1. Этот ответ должен быть общепринятым, и особенно следует использовать вторую часть

Ответ №2:

Это приведет к получению значения при вводе пользователем:

 <div class="stats">
    <label>
        Weight<input type="number" onInput="getWeight()" id="weight">
    <label>
</div>
<script>
    function getWeight() {
        let weight = document.getElementById('weight').value;
        console.log(weight/2.205);
    }
</script>

Ответ №3:

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

Вам нужно будет использовать element.addEventListener метод, чтобы вы могли запускать свой код каждый раз, когда происходит событие ввода.

element.addEventListener метод принимает:

  • тип события (на этот раз входное событие)
  • функция обратного вызова (сюда входит ваш исходный код)
  • другие варианты (проверьте MDN для получения дополнительной информации)

Внутри тега сценария вы можете зарегистрировать прослушиватель событий следующим образом:

 let weightInput = document.getElementById('weight');
weightInput.addEventListener('input', function() {
   /* code here runs every time the input event is triggered */
   console.log(weightInput.value/2.205);
});
Метки: ,