Why does my JavaScript code not work when I directly copy it into brackets?

Question

I am currently trying to test out the code at this link in JSfiddle: http://jsfiddle.net/yeyene/GYuBv/2/ in Brackets.

Javascript:

$('#showSelected').on('click', function(){
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    alert(text);    
});

Html:

<div>
    <p>The quick brown fox jumps over the lazy dog</p>
</div>
<br />
<input id="showSelected" type="button" value="showSelected" />

I have taken the code and entered it into brackets. I have linked jQuery at the top of the header but whenever I run the code, the JavaScript does not execute when I press the button.

Here is my code in brackets that doesn't work. I recently set up brackets and set the file type to HTML. I am unsure if there is any setting I should have set up that I missed.My Brackets Code

Brackets:

<html>

<head>

    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $('#showSelected').on('click', function() {

            var text = "";
            if (window.getSelection) {
                text = window.getSelection().toString();
            } else if (document.selection && document.selection.type != "Control") {
                text = document.selection.createRange().text;
            }

            alert(text);
        });

    </script>

</head>


<div>
    <p>The quick brown fox jumps over the lazy dog</p>
</div>
<br />

<input id="showSelected" type="button" value="showSelected" />

</html>

Thanks

Have you checked the console for any errors? Is the jquery file really in the same folder as the HTML? — Sirko, Jun 11 '18 at 14:04
Add your code in document-ready handler i.e. `$(function(){ //Add your code })` or move script to bottom of page before closing of body tag — Satpal, Jun 11 '18 at 14:06

score 4 · Accepted Answer · edited Jun 11 '18 at 14:08

The <script> with your code is executed before the <input> is rendered.

In order to execute your code after the entire document is ready, wrap it in $(document).ready(function() { // stuff });

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#showSelected').on('click', function() {

        var text = "";
        if (window.getSelection) {
          text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
          text = document.selection.createRange().text;
        }

        alert(text);
      });
    });
  </script>
</head>

<body>
  <div>
    <p>The quick brown fox jumps over the lazy dog</p>
  </div>
  <br />

  <input id="showSelected" type="button" value="showSelected" />
</body>

</html>

score 0 · Answer 2 · answered Jun 11 '18 at 14:12

0

You have to add your Javascript code inside

$(document).ready(function() { /*javascript code here */ }

answered Jun 11 '18 at 14:12

Siddhesh damble

74
1
8

I would upvote that, but it's a lazy answer. "Just add this" is a bit light, it would be better if you explained why, what this does and what OP's error is. See @Protozoid's answer – Jeremy Thille Jun 11 '18 at 15:26

score -2 · Answer 3 · answered Jun 11 '18 at 14:07

-2

I believe you are new to HTML and Js. From your question, everything seems correct except you probably have not loaded the jQuery library. (jquery-3.3.1.min.js).

Load the library and every thing should work well

answered Jun 11 '18 at 14:07

vizsatiz

1,312
1
11
23

I think you missed the `` part :) And no, everything is not correct. The script is executed before the HTML is loaded, so it can't work. 2 reasons to get a downvote, sorry – Jeremy Thille Jun 11 '18 at 15:24
I saw this part. What I meant was your jQuery file was **not loaded** (Its not getting loaded). I knew that you placed it in your HTML. I accept I missed the document. ready part. – vizsatiz Jun 12 '18 at 06:23
Yes it is loaded. Scripts are loaded synchronously, unless they have the `async` attribute (` – Jeremy Thille Jun 12 '18 at 06:25
No, It was not loaded in his case because he didn't have the file "jquery-3.3.1.min.js" in the same directory as his html file. But thats ok, was just making a point. Am new in the community :) – vizsatiz Jun 12 '18 at 06:43

Why does my JavaScript code not work when I directly copy it into brackets?

3 Answers3