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>

The fiddle you posted is working fine! I wrote `apple` and when the input looses focus, it shows `apple` on an `ul` — Hamza Abdaoui, Dec 23 '20 at 14:54
You can use String.includes() to get equivalent strings easier :) — Vitor Piovezam, Dec 23 '20 at 14:54

score 1 · Answer 1 · answered Dec 23 '20 at 14:54

1

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.

answered Dec 23 '20 at 14:54

Arianne

507
2
7

@RajeevPandey You're `change` event was working, so I don't see how `input` would make any difference. The problem is with the code in the handler, not the handler itself. See my answer. – Scott Marcus Dec 23 '20 at 15:02
You are correct too Marcus, but this answer makes my code work the way I wanted. – Rajeev Pandey Dec 23 '20 at 15:40

Scott Marcus · Answer 2 · 2020-12-23T15:00:41.843

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>

Anjali Verma · Answer 3 · 2020-12-23T15:02:27.883

-1

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.

edited Dec 23 '20 at 15:02

answered Dec 23 '20 at 14:57

Anjali Verma

26
2
5

Op ***is*** using `change` event. – Scott Marcus Dec 23 '20 at 15:01

onChange event not being called with change in value in input tag

3 Answers3