0

I have a table that can be edited via the following JS

account.innerHTML="<input type='text'  id='account_text"+no+"' value='"+account_data+"' class='dropbutton2' onclick='dropdownFunction2(); options2()' onkeyup='filterFunction2()'> <div id='myDropdown2' class='dropdown-content2'></div>";

When the input field is clicked I want a dropdown to pop out (this works). But I'm trying to make the dropdown searchable with the following code:

//Searchable dropdown
function filterFunction2(){
  var input, filter, ul, li, a, i;
  input = document.querySelectorAll('.dropbutton2');
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown2");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

I had it working on codepen. Back then I used getElementbyId instead of Queryselector but since the id is dynamic (based on row num) I'm not sure I can do this.

The way it is now I keep getting the following error:

2table.js:333 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
    at filterFunction2 (table.js:333)
    at HTMLInputElement.onkeyup (index.html:1)

Edit:

The solution was to replace query selector with this:

var elements = document.getElementsByClassName('dropbutton2'); var input = elements[0];

Check out this question if you have a similar problem: Javascript: How to get only one element by class name?

smurf41
  • 45
  • 7
  • 2
    `querySelectorAll` does not return a single element. It returns a NodeList, an array like object, which can contain 0 to many elements. – Taplar Oct 09 '20 at 19:06
  • Does this answer your question? [InnerHTML with onclick= not executing associated JS functions](https://stackoverflow.com/questions/64284365/innerhtml-with-onclick-not-executing-associated-js-functions) – Yannick Oct 09 '20 at 19:08
  • You do not need to fetch that input filed at all. You can pass event into function then target Event Property to get the value of input field: https://jsfiddle.net/puhdw1os/1/ Please read and learn how to: https://www.w3schools.com/jsref/event_target.asp – ikiK Oct 09 '20 at 19:44

0 Answers0