How to use javascript script in html code in local

Question

My code in jsfiddle is working but when I try to use it in local it doesn't. I don't know how to fix it because i think that the code is right. I tried also to download the Jquery file and I linked it in the code but it doesn't working. I'm sure that is a stupid error, but I don't know how to solve it.

Working Jsfiddle

My prova.php file:

<html lang="it">
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <meta charset="UTF-8">
            <link rel="stylesheet" href="style.css"/>
        </head>
        <script type="text/javascript">

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 145;
  var words = primo.textContent.replace(/(&lt;([^&gt;]+)&gt;)/ig,"").split(/\s/);
  if (words.length) {
    var count = 0;
    var div = createDiv();
    words.forEach(function(word) {
      if (++count > wordLimit) {
        count = 1;
        div = createDiv();
      }
      if (div.innerHTML) {
        div.append(' ');
      }
      div.append(word);
    });
  }
});

function createDiv() {
  div = document.createElement('div');
  div.className = 'fakes';
  document.getElementById('boxes').append(div);
  return div;
}

        </script> 
        <body>
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button> <br>
<div id='boxes'>

</div>

</body>
</html>

My style.css:

#faketxt {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}

.fakes {
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
  display: inline-block;
  float: left;
}

#boxes {
  display: flex;
  display: inline-block;
}

I can't see any errors in the console by default, there is a way to see them? — Niccolò Guidi, Jan 28 '17 at 14:14
@NiccolòGuidi Try console.log in various places of your js code; e.g. in click event. — user31782, Jan 28 '17 at 14:15
No erros, and it seems like that jquery library is loaded, from sources. — Niccolò Guidi, Jan 28 '17 at 14:16
If jquery hadn't been loaded then you'd have got error in console. You can type `jQuery` then press enter to double check. — user31782, Jan 28 '17 at 14:18
@user31782 If I type "jQuery", it displays this " function (a,b){return new r.fn.init(a,b)}" — Niccolò Guidi, Jan 28 '17 at 14:20
@NiccolòGuidi Yes its there. jquery is loaded. Try copy pasting whole js code in console. Then you'd either get the page working or it will throw some error. — user31782, Jan 28 '17 at 14:21
Yes, It's working only if I paste my js code in the console, but why? How can it be fixed? — Niccolò Guidi, Jan 28 '17 at 14:25
Which browser do you use? are you using a local server or just double click on HTML file? — Mohamed Noor, Jan 28 '17 at 14:35
I think that's why, try to use a local server (wamp for example: http://www.wampserver.com/en/), or run the file using Google Chrome, but most likely you need a local server. — Mohamed Noor, Jan 28 '17 at 14:38

score 1 · Accepted Answer · answered Jan 28 '17 at 14:41

1

It is because your html is after js code. Put the js code after the html code or put it in dom ready.

What is happening is when your javascript code executes there is no #btn, no #faketxt and no #boxes. So the $("#btn") declared before <button id="btn"></button> returns an empty string because there is no element matched by it.

answered Jan 28 '17 at 14:41

user31782

7,087
14
68
143

I don't understand the downvote. – user31782 Jan 28 '17 at 14:43
1

You're right, thank you very much! – Niccolò Guidi Jan 28 '17 at 14:43
the downvote isn't mine – Niccolò Guidi Jan 28 '17 at 14:44
@NiccolòGuidi No worries : ) glad to help you. – user31782 Jan 28 '17 at 14:45

score 0 · Answer 2 · answered Jan 28 '17 at 14:21

0

Possible Answers:

1: You linked a file with '//' like '//code.jquery.com'. Fix it: Replace '//' with 'http://'

2: Are you sure your CSS file is linked correctly? Maybe the file inside a subfolder css. Fix it: '/css/style.css'

answered Jan 28 '17 at 14:21

howtoweb

349
1
3
10

The jquery library is loaded and my css is linked correctly :) but it still doesn't working , look at the comments above – Niccolò Guidi Jan 28 '17 at 14:26

How to use javascript script in html code in local

2 Answers2