onChange event not being called with change in value in input tag
Question
Unable to figure out why 'onChange' event is not firing with change in the value of. The onChange event fires when I hit enter when the is in focus. I have added the 'change' event to the tag in a seperate JS file.
The basic function of the JS file is to take value from the and compare it with some strings, and output the matching strings.
//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>
3 answers
solution1
1 2020-12-23 14:54:46
Try using input instead of change
inputField.addEventListener("input",onChangeHandler);
the onChange event only fires when the input box loses focus. The onInput event fires when the input is changed.
solution2
0 2020-12-23 14:52:01
Your handler is running but your test:
if(data[i].indexOf(queryString)==0)
should be:
if(data[i].indexOf(queryString)==-1)
because indexOf() returns -1 when the item isn't found, not 0 .
Now, you've also got your loop and your if test a little backwards. You need to check to see if the array already has the input value and if not, then add that value to the array... then loop over the array and make list items from it.
Also, don't use getElementsByTagName() in general because it returns a "live node list" and definitely don't put an index on the resulting list. Instead, use .querySelector() (as shown below).
//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>
solution3
-1 2020-12-23 14:57:03
inputField.addEventListener("input",onChangeHandler);
Use input event instead of change event, Change event triggers when the element goes out of focus. The input event fires synchronously on change of the content for the element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.