TypeError: event.target is undefined

hello
if there is just the first function it run very good but if I add the second I get the message in Firefox " TypeError: event.target is undefined "

   (function(){
    
    document.getElementById("ta").onclick = function(){ ta(); };    
    function ta(){
            
            var tav = document.getElementById("ta").value, ta = document.getElementById("ta");
            ta.setAttribute('style','height:200px;')
    }
})();
window.onclick = function(event) {
    
    var tav = document.getElementById("ta").value, ta = document.getElementById("ta");
    if (! event.target.matches('#ta')) {
        
        if( tav == "" ){
            
            ta.setAttribute('style','height:25px;');
        }
        else if( tav !== "" ){
            
            ta.setAttribute('style','height:200px;');
        }
    }
}
(function(){
    
    document.getElementById("close").onclick = function(){hide_notify();};    
    function hide_notify(){
        
        var notify = document.getElementById("notify");
        notify.parentElement.removeChild(notify);
    }
})();    

I’m still new in JavaScript so I have no idea what is going on !
thanks.

1 Like

If you change it to this what does it log?

window.onclick = function(event) {
console.log( typeof event.target );
/*
    var tav = document.getElementById("ta").value, ta = document.getElementById("ta");
    if (! event.target.matches('#ta')) {
        if ( tav == "" ) {
            ta.setAttribute('style','height:25px;');
        }
        else if ( tav !== "" ) {
            ta.setAttribute('style','height:200px;');
        }
    }
*/
}

TypeError: (intermediate value)(…) is not a function

Hmmm, I’m still not sure what the problem is exactly.

My best guess is that it has something to do with event bubbling / capturing.
and / or
the problem is with “window” having the click event.

I think that if instead of trying to match the target to the element with that id you instead assign an event listener to that element you’ll have better luck. Try

var ta = document.getElementById("ta");
ta.addEventListener('click', function(event) {
  var tav = document.getElementById("ta").value;
  if( tav == "" ) {
    ta.setAttribute('style','height:25px;');
  }
  else if( tav !== "" ) {
    ta.setAttribute('style','height:200px;');
  }
});

You are missing the semi-colon here at the end of the window onclick function…

}; // missing semi colon
(function(){
    document.getElementById("close").onclick = function(){hide_notify();};

Your code will work now assuming the html exists that you are referencing.

4 Likes

Thanks ! It’s Working !

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.