0

I have a JS function invoked by an onmouseenter event, whoose aim is to write something in the innerHtml of the invoking object, when I go in and out of the object really fast with the mouse, my function fails:

Uncaught TypeError: Cannot read property 'id' of null
at showTextOnav (main.js:99)
at HTMLElement.onmouseenter (index.html:1)
showTextOnav @ main.js:99
onmouseenter @ index.html:1

I investigated and found out that, the parent of the object, passed to the function by the event, has no id, while it should have an id. is it possible that the onmousenter event is not passing the object at all?

js code:

function showTextOnav(obj, description){
    console.log(obj.parentNode.id);
    content = document.getElementById(obj.parentNode.id).innerHTML;
    var htmlDescription = '<div onmouseleave="hideTextOnav(this, \''
    + description + '\')">' + description + '</div>';
    console.log(content);
    if(!(content.includes(htmlDescription))){
        console.log("showTextOnav");
        console.log(obj.parentNode.id);
        document.getElementById(obj.parentNode.id).innerHTML += (htmlDescription);
    }
}

function hideTextOnav(obj, description){
    let content = document.getElementById(obj.parentNode.id).innerHTML;
    var htmlDescription = '<div onmouseleave="hideTextOnav(this, \''
    + description + '\')">' + description + '</div>';
    console.log(content);
    if((content.includes(htmlDescription))){
        console.log("hideTextOnav");
        console.log(obj.parentNode.id);
        console.log(content);
        console.log(htmlDescription);
        content = content.replace(htmlDescription, '');
        document.getElementById(obj.parentNode.id).innerHTML = content;
    }
}

HTML code:

<div id="onavbar" class="onavbar">
        <a onclick="toggleOnav()" id="blocktoggleonav" class="right" style="display: none";>
            <i class="material-icons" id="toggleonav">keyboard_arrow_right</i>
        </a>
        <a onclick="toggleVnav()" id="blocktogglevnav">
            <i class="material-icons" id="togglevnav" onmouseenter="showTextOnav(this, 'SIDEBAR')"
            onmouseleave="hideTextOnav(this, 'SIDEBAR')">dehaze</i>
        </a>
        <a  class="active" href="index.html" id = "gotoindex">
            <i class="material-icons"  onmouseenter="showTextOnav(this, 'HOME')"
            onmouseleave="hideTextOnav(this, 'HOME')">home</i>
        </a>
        <a href="chisono.html" id = "gotowhoami">
            <i class="material-icons" onmouseenter="showTextOnav(this, 'INFO')"
            onmouseleave="hideTextOnav(this, 'INFO')">person</i>
        </a>
        <a href="novità.html" id = "gotonews">
            <i class="material-icons" onmouseenter="showTextOnav(this, 'NEWS')"
            onmouseleave="hideTextOnav(this, 'NEWS')">new_releases</i>
        </a>
        <a href="esperimenti.html" id = "gotoexperiments">
            <i class="material-icons" onmouseenter="showTextOnav(this, 'TRY ME')"
            onmouseleave="hideTextOnav(this, 'TRY ME')">apps</i>
        </a>
    </div>
Pietro
  • 11
  • 2
  • Is it happening all the times or intermittently? – Vimal Patel Nov 30 '20 at 16:49
  • 1
    Inline event attributes like `onmouseenter` should not be used in 2020. This is a 20+ year old technique that just will not die because people see other people (who don't know any better) using it and just copy what they did. Separate your JavaScript from your HTML and set up the event handlers with `.addEventListener()`, which will automatically be passed a reference to the event that triggered the handler. From that event, you can use `. – Scott Marcus Nov 30 '20 at 16:57
  • @VimalPatel, it is happening intermittently, it happens when I move the mouse over the element at a certain speed, not so fast that onmouseenter does not activate but fast enough that it does not work. – Pietro Nov 30 '20 at 18:12
  • @ScottMarcus, I used onmouseenter because I do not want to edit my JS code, if in future I want to add a link. Furtheremore, Adding a listener to each element would not be redundant? Are onmouse events so bad? – Pietro Nov 30 '20 at 18:22
  • @ScottMarcos Anyway, thank you, with event listeners it works, even thoug I'd have preferred not to use them. – Pietro Nov 30 '20 at 19:06
  • This is not just a matter of style. [There are real differences in the way the code works with inline vs. `.addEventListener()`](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991), which the vast majority of users aren't aware of and ultimately cause problems for them. Your problem is an example of this. And, using event delegation, you can set up a single listener on a parent element that handles the same event for all its descendants. Take it from someone who has been writing and teaching this stuff since it was invented. – Scott Marcus Nov 30 '20 at 19:14
  • Thank you, but i had to do custom listeners anyway because I passed a custom parameter for each one, i ended up using a new file "listeners.js", to keep the code clean, anyway I added the listeners and everything works but there is still the same problem, even if it does not occur as often. – Pietro Dec 01 '20 at 21:48

0 Answers0