Position of script tag in html

Question

I am trying to duplicate Expanding Text Areas Made Elegant

Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.

I have this in my index.html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="test.js"></script>
  </head>
  <body>
    <figure>
    <div class="expandingArea">
      <pre><span></span><br></pre>
      <textarea></textarea>
      </div>
      </figure>    
  </body>
</html>

And my test.js looks like: enter image description here

This doesn't really works. However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">    
  </head>
  <body>
    <figure>
    <div class="expandingArea">
      <pre><span></span><br></pre>
      <textarea></textarea>
      </div>
      </figure>

 <script>
    function makeExpandingArea(container) {
      var area = container.querySelector('textarea');
      var span = container.querySelector('span');
      if (area.addEventListener) {
      area.addEventListener('input', function() {
      span.textContent = area.value;
      }, false);
      span.textContent = area.value;
      } else if (area.attachEvent) {
      // IE8 compatibility
      area.attachEvent('onpropertychange', function() {
      span.innerText = area.value;
      });
      span.innerText = area.value;
       }
      // Enable extra CSS
      container.className += ' active';
      }var areas = document.querySelectorAll('.expandingArea');
      var l = areas.length;while (l--) {
      makeExpandingArea(areas[l]);
      }
  </script>

  </body>
</html>

score 0 · Answer 1 · answered Mar 29 '15 at 05:17

0

In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.

I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.

answered Mar 29 '15 at 05:17

Sean

427
3
9

Thanks Sean. I have already checked if my js file is loading and there no problem with it. To make sure that my js gets executed after DOM gets loaded i have use `window.onload`. – sonalkr132 Mar 29 '15 at 05:19

Farzher · Accepted Answer · 2015-03-29T05:25:59.423

0

You're not actually using onload

Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.

When you include it in the <head> it runs before any elements exist. That's why the position of it matters.

edited Mar 29 '15 at 05:25

answered Mar 29 '15 at 05:20

Farzher

13,934
21
69
100

I was following this: http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load to make sure that my js gets executed after DOM is loaded. Anyway, any idea what I can do so that it works from separate file too? – sonalkr132 Mar 29 '15 at 05:23
yea, move your last 4 lines of code up into the onload function! Your code is outside of the function. Just indent your code correnctly, then the problem is obvious. – Farzher Mar 29 '15 at 05:25

score 0 · Answer 3 · answered Mar 29 '15 at 05:25

try this in your code: I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side html code:

<html>
<body>

    <table>
      <tr>
          <td>Description:</td>
          <td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
          <td></td>
      </tr>
    </table>

//css-code required inside html:
<style>
textarea.form-control {
    height: auto;
    resize: none;
    width: 300px;
}
</style>

</body>
</html>

Position of script tag in html

3 Answers3