Fehlermeldung X is not a Function trotz Fefinierung der Funktion

  • JavaScript

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von shad.

    Fehlermeldung X is not a Function trotz Fefinierung der Funktion

    Guten Morgen,

    seit ein paar Stunden beschäftigt mich dieser Fehler, ich weis nicht warum er auftritt, die Funktion ist ja definiert.
    Über hilfreiche Antworten würde ich mich freuen.

    Mein Code:
    Spoiler anzeigen

    JavaScript-Quellcode

    1. class SearchBar {
    3. /**
    4. * SearchBar Constructor
    5. * @param {Element} input
    6. * @param {Element} suggestions
    7. */
    8. constructor(input, suggestions, suggestions_array) {
    9. this['eInput'] = input
    10. this['eSuggestions'] = suggestions
    11. this['arraySuggestions'] = suggestions_array
    13. this.setEventListeners()
    14. }
    16. setEventListeners() {
    17. this.eInput.addEventListener('keydown', this.eInput_onKeyDown)
    18. this.eInput.addEventListener('focusin', this.eInput_onFocusIn)
    19. this.eInput.addEventListener('focusout', this.eInput_onFocusOut)
    20. this.eInput.addEventListener('keyup', this.eInput_onKeyUp)
    21. }
    23. suggestionsToggle(state) {
    24. if (state == true) {
    25. this.eSuggestions.style.display = 'unset'
    26. }
    28. if (state == false) {
    29. this.eSuggestions.style.display = 'none'
    30. }
    31. }
    33. eInput_onKeyDown(e) {
    34. if (e.key == "Enter") {
    35. this.blur()
    36. }
    37. }
    39. eInput_onFocusIn(e) {
    40. var inp = e.target.parentNode.parentNode
    41. inp.classList.add('focus')
    42. }
    44. eInput_onFocusOut(e) {
    45. var inp = e.target.parentNode.parentNode
    46. inp.classList.remove('focus')
    48. this.suggestionsToggle(false)
    49. }
    51. eInput_onKeyUp(e) {
    52. const text = this.value
    54. if (text == '') {
    55. this.suggestionsToggle(false)
    56. } else {
    57. this.suggestionsToggle(true)
    58. }
    60. if (!text) return
    62. const suggestionArray = this.arraySuggestions.filter((data) => {
    63. return data.startsWith(text.toLowerCase())
    64. })
    66. this.suggestionsUpdate(suggestionArray)
    67. }
    69. eSuggestions_onItemClick(e) {
    70. alert(e.target.getAttribute('value'))
    71. }
    73. suggestionsUpdate(e) {
    74. // Clearing suggsetion list
    75. this.eSuggestions.innerHTML = ''
    77. if (e.length == 0) {
    78. this.suggestionsToggle(false)
    79. }
    81. e.forEach((sugg) => {
    82. var liElement = document.createElement('li')
    83. liElement.setAttribute('value', sugg)
    84. liElement.addEventListener('click', this._eSuggestions_onItemClick)
    85. liElement.appendChild(document.createTextNode(sugg))
    87. this.eSuggestions.appendChild(liElement)
    88. })
    89. }
    90. }



    Fehler Meldung:

    Quellcode

    1. class.searchbar.js:57 Uncaught TypeError: this.suggestionsToggle is not a function
    2. at HTMLInputElement.eInput_onKeyUp (class.searchbar.js:57)

    Ohne es getestet zu haben:
    Vermutlich verliert sich der this Kontext wenn du die handler als Event Listener weitergibts. Sprich, sobald die Handler aufgerufen werden zeigt das this in den Handlern nicht mehr auf deine Klasse, sondern auf irgendetwas anderes.

    Versuch mal die Handler explizit an die Klasse zu binden:

    JavaScript-Quellcode

    1. ...
    2. this.eInput.addEventListener('keydown', this.eInput_onKeyDown.bind(this))
    3. ...


    Alternativ könntest du die Handler auch einfach als Arrow Functions definieren (die capturen this immer korrekt wie man es erwarten würde):

    JavaScript-Quellcode

    1. this.eInput.addEventListener('keydown', (e) => {
    2. if (e.key == "Enter") {
    3. this.blur()
    4. }
    5. })

Facebook
Telefonspende