Javascript won't fade text and throws no error when run

Question

window.onload = function() {
  window.setTimeout(fadein, 1000); //2 seconds
}
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
 var x = event.pageX; 
 if (x > 1200) {
    function fadein() {
      document.getElementById('fadein').style.opacity = '0';

    }
 }
});

I just want the text to fade after the mouse x coordinate reaches a certain point. JavaScript throws no error, am I missing any syntax or do I lack a fundamental understanding of how I should go about this process?

Some quick FAQ I might expect:

Yes, I have JQuery loaded

Yes, the HTML/CSS is all consistent in naming.

https://stackoverflow.com/questions/1047454/what-is-lexical-scope — Jay Harris, Sep 12 '18 at 00:52
https://medium.com/@nickbalestra/javascripts-lexical-scope-hoisting-and-closures-without-mystery-c2324681d4be — Jay Harris, Sep 12 '18 at 00:52
Unrelated to your problem, but I nominate `window.setTimeout(fadein, 1000); //2 seconds` as the best comment ever. :) — Amadan, Sep 12 '18 at 00:54
@Amadan Let's also not forget that `fadein` function actually hides the element. This guy is hilarious! :) — Ram, Sep 12 '18 at 01:01

Ram · Answer 1 · 2018-09-12T00:59:32.350

You are defining the fadein in your mousemove handler. The function is only available in that context so fadein in your onload handler is undefined.
function fadein() { ... } is a function declaration. You don't call it, so the function body is never executed!

You should define the function outside the mousemove handler and call it in your if statement by using invocation operator: (), i.e.: fadein().

function fadein() {
  document.getElementById('fadein').style.opacity = '0';
}

window.onload = function() {
  window.setTimeout(fadein, 1000); //2 seconds?
}

$( document ).on( "mousemove", function( event ) {
   $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
   var x = event.pageX; 
   if (x > 1200) {
     fadein();
   }
});

As a side note, setting CSS opacity to 0 makes the element invisible. So it actually fades out the element.

score 1 · Answer 2 · answered Sep 12 '18 at 00:59

Try like this.

function fadein() {
  document.getElementById('fadein').style.opacity = '0';
}
window.onload = function() {
window.setTimeout(fadein, 1000); //2 seconds
}
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " +       event.pageY );
var x = event.pageX; 
if (x > 1200) {
 fadein()
}
});

Javascript won't fade text and throws no error when run

2 Answers2