Javascript 脚本标记在html中的位置_Javascript_Jquery_Html

Javascript 脚本标记在html中的位置

javascript jquery html

Javascript 脚本标记在html中的位置,javascript,jquery,html,Javascript,Jquery,Html,我正在努力复制基本上，它解释了我们如何实现fb评论框，它的大小随着文本文件的增加而增加我的index.html中有以下内容：函数makeexpandingreacontainer{ var area=container.querySelector'textarea'； var span=container.querySelector'span'；如果是area.addEventListener{ area.addEventListener'input'，函数{ span.textCont

我正在努力复制

基本上，它解释了我们如何实现fb评论框，它的大小随着文本文件的增加而增加

我的index.html中有以下内容：

函数makeexpandingreacontainer{ var area=container.querySelector'textarea'； var span=container.querySelector'span'；如果是area.addEventListener{ area.addEventListener'input'，函数{ span.textContent=area.value； }，假； span.textContent=area.value； }如果为area.attachEvent，则为else{ //IE8兼容性 area.attachEvent'onpropertychange'，函数{ span.innerText=area.value； }; span.innerText=area.value； } //启用额外的CSS container.className+=“活动”； }变量区域=document.queryselectoral'.expandingArea'； var l=面积。长度；而我-{ 扩大区域面积[l]； }

在浏览器中，我推荐Chrome用于测试打开开发者工具，右键单击并选择inspect element，确保test.js文件的路径正确。通过选择developer tools窗口顶部的“Sources”选项卡，然后在源代码列表中选择test.js文件来完成此操作

我还认为最好的做法是在最后一个正文标签之前在Web文档的底部加载JS文件，以保证它们在DOM元素加载之后加载。p> 您实际上没有使用onload

您的格式设置非常混乱，很难说清楚，但是在onload函数之后，您的init代码位于底部的while循环中

当您将其包含在中时，它将在任何元素存在之前运行。这就是为什么it的位置很重要。

在您的代码中尝试以下内容：我在一个表中使用了一个css类表单控件。此文本区域的属性位于side中的side标记中 html代码：

谢谢，肖恩。我已经检查了我的js文件是否正在加载，并且没有问题。为了确保我的js在DOM加载后得到执行，我使用了window.onload。我是这样做的：为了确保我的js在DOM加载后得到执行。不管怎样，你知道我能做些什么，使它也能从单独的文件中工作吗？是的，把最后4行代码移到onload函数中！您的代码不在函数范围内。只要正确地缩进代码，问题就显而易见了。

<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>

<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>

<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>