Question

下面的代码为什么不将输入的按键记录在输入框中：

const input = document.querySelector('.header--input');
const inputValue = document.querySelector('.header--input').value;

input.addEventListener('keyup', function(e){

    if(inputValue !==''){
        console.log(inputValue);
    }
})

但以下代码有效：

const input = document.querySelector('.header--input');

input.addEventListener('keyup', function(e){

    const inputValue = e.target.value;
    if(inputValue !==''){
        console.log(inputValue);
    }
})

Answer 1

您的第一个代码不起作用，因为inputValue在您的keyup被解雇之前被评估，并且值为 empty ，并且在{{1}上没有变化}。要获取输入的当前值，您必须在事件处理函数中分配值：

keyup

const input = document.querySelector('.header--input');
input.addEventListener('keyup', function(e){
  const inputValue = this.value;
  if(inputValue !==''){
    console.log(inputValue);
  }
});

Answer 2

在第一个代码段中，inputValue保留了.header--input输入元素的初始值，以后将不会更改。

在第二个代码中，每当使用updated input value按下键时，您都将获取e.target.value;。

Answer 3

在第一个方法中，输入的值是在加载文档$(function () { //Image Error $("img").on("error", function () { var $img = $(this); var imgsrc = $img.attr("src"); $img.attr("src", "New Image Path"); }); });时获取的，并且在调用keyup且if条件始终失败时不会更改

empty string

const input = document.querySelector('.header--input');
const inputValue = document.querySelector('.header--input').value;
console.log(inputValue, ' --> input value is empty')

input.addEventListener('keyup', function(e){
    if(inputValue !==''){
        console.log(inputValue);
    }
})

而在您的第二个示例中，值是在<input class='header--input'></input>事件中评估的

document.querySelector（'。header--input'）。value与e.target.value

3 个答案: