Function is not running when page loads

Asked

Viewed 2,472 times

0

The Javascript code below should display an alert window with the phrase "Hello World!" when the index.html page was loaded, but this does not happen... Page content loads, but the function does not execute.

var main = function () {
  'use strict';

alert("Hello World!");
};

$(document).ready(main);

Someone would know to tell me what’s wrong with her?

var main = function () {
  'use strict';

alert("Hello World!");
};

window.onload = main;
<!DOCTYPE html>
<html>
  <head>
    <title>A Simple App</title>
    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
  </head>

  <body>
    <header>
    </header>

    <section class="comment-input">
      <p>Add Your Comment:</p>
      <input type = "text"><button>+</button>
    </section>
    
    <section class="coments">
      <p>This is the first comment!</p>
      <p>Here's the second one!</p>
      <p>And this is one more.</p>
      <p>Here is another one.</p>
    </section>

    

    <script scr="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script scr="app.js"></script>

  </body>
</html>

javascript

  • Just a reminder, the title of the question has nothing to do with anything, much less the problem... try to apply a title that clarifies the problem at hand.

  • The question is this why I want to know... I don’t know much about javascript and still don’t know very well what I’m doing...

  • Do you know you’re using jQuery? It was your intention?

  • yes, I loaded jQuery 2.1.3... I will post the code I used in html...

  • 3

    scr should be src... comes from source in English. That is, where you have <script scr=, mute to <script src="

  • 1

    Yes, now it worked... Thank you very much!... _ Sorry for the silly doubt... but like I said, I don’t know much about javascript... :/

Show 1 more comment

1 answer

4


Your code works perfectly, see the example below:

var main = function() {
  'use strict';

  alert("Hello World!");
};

$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Now, if you don’t have jQuery loaded, you’re gonna get a bug like:

Referenceerror: $ is not defined

Error that will cause the Javascript code on your page to stop working.

You must include jQuery before this code is read:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
  var main = function() {
    'use strict';

    alert("Hello World!");
  };

  $(document).ready(main);
</script>

In case you are not using jQuery, you have to change your code as follows:

$(document).ready(main); // documento pronto

Must pass to:

window.onload = main;    // documento pronto JavaScript puro

Example:

var main = function() {
  'use strict';

  alert("Hello World!");
};

window.onload = main;

  • 1

    Or document.addEventListener('DOMContentLoaded', main);, which is what jQuery does (except in browsers not compatible).

  • Well, on the index.html page I loaded jquery 2.1.3 and the above function in a separate file, called app.js and called in index.html, but at the end of the file, following an example I was using... before closing the body tag...

  • @Vanessaribeiro Was the file read by the browser? To test you can put as first line of that file the following: alert("Ficheiro lido");. If this alert appears then the file is being read, which means that we are back to the problem of jQuery and the fact that it is or is not being loaded on the page.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.