在输入标记中的值发生更改时未调用onChange事件

提问者：小点点

在输入标记中的值发生更改时未调用onChange事件

的值发生更改时，无法找出“On change”事件为何不触发。当我在焦点中按enter时，onChange事件将激发。我在一个单独的JS文件中将'change'事件添加到标记中。

JS文件的基本功能是从取值并将其与一些字符串进行比较，然后输出匹配的字符串。

null

//name of fruits
let data=["apple","watermelon","orange","strawberry","grape","cherry","mango","nectarine","banana","pomegranate","raspberry","papaya","kiwi","pineapple","lemon","apricot","grapefruit","peach","avocado","passion fruit","plum","lime","blueberry","lychee","fig"]


//------------------------------------//

//Grabbing important elements
let inputField = document.getElementsByTagName("input")[0];
let ul = document.getElementsByTagName("ul")[0];

//bindings
inputField.addEventListener("change",onChangeHandler);

//functions
function onChangeHandler(){
    //empty the ul before inserting anything
    ul.innerHTML="";

    let queryString = inputField.value;
    if(queryString==""){
        return;
    }
    for(i=0;i<data.length;i++){
        if(data[i].indexOf(queryString)==0){
           let li = document.createElement("li");
           li.innerText = data[i];
           ul.appendChild(li);
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div id="search">
            <input type="text">
        </div>
        <ul id="output">

        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

null

共3个答案

匿名用户

尝试使用输入而不是更改

inputField.addEventListener("input",onChangeHandler);

OnChange事件仅在输入框失去焦点时激发。更改输入时激发oninput事件。

匿名用户

您的处理程序正在运行，但您的测试:

if(data[i].indexOf(queryString)==0)

应该是:

if(data[i].indexOf(queryString)==-1)

因为indexof()在未找到项时返回-1，而不是0。

现在，您还得到了循环和if测试。您需要检查数组是否已经具有输入值，如果没有，则将该值添加到数组中。。。然后在数组上循环并从中生成列表项。

另外，一般情况下不要使用getElementsByTagName()，因为它返回一个“活动节点列表”，而且绝对不要在结果列表上放置索引。相反，使用.querySelector()（如下所示）。

null

//name of fruits
let data = [
    "apple",
    "watermelon",
    "orange",
    "strawberry",
    "grape",
    "cherry",
    "mango",
    "nectarine",
    "banana",
    "pomegranate",
    "raspberry",
    "papaya",
    "kiwi",
    "pineapple",
    "lemon",
    "apricot",
    "grapefruit",
    "peach",
    "avocado",
    "passion fruit",
    "plum",
    "lime",
    "blueberry",
    "lychee",
    "fig"
]


//------------------------------------//

//Grabbing important elements
let inputField = document.querySelector("input");
let ul = document.querySelector("ul");

//bindings
inputField.addEventListener("change", onChangeHandler);

//functions
function onChangeHandler(){
    //empty the ul before inserting anything
    ul.innerHTML="";

    let queryString = inputField.value;

    if(queryString==""){
        return;
    }
    
    // First check to see if the input value is in the array:
    if(data.indexOf(queryString)==-1){
      // It isn't, so add it to the array
      data.push(queryString);
      
      // Then loop over the array
      for(i=0;i<data.length;i++){
           let li = document.createElement("li");
           li.innerText = data[i];
           ul.appendChild(li);
      }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div id="search">
            <input type="text">
        </div>
        <ul id="output">

        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

匿名用户

InputField.AddEventListener（“Input”，onChangeHandler）；

使用输入事件而不是更改事件，更改事件会在元素失去焦点时触发。在更改元素内容时同步激发input事件。