Question

我在jsfiddle中的代码正在运行，但是当我尝试在本地使用它时却没有。我不知道如何解决它，因为我认为代码是正确的。我也尝试下载Jquery文件，并将其链接到代码中，但它无法正常工作。我确定这是一个愚蠢的错误，但我不知道如何解决它。

我的prova.php文件：

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

我的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;
}

Answer 1

这是因为你的html是在js代码之后。将js代码放在html代码之后或将其放入dom准备好。

当您的javascript代码执行时，没有#btn，没有#faketxt而没有#boxes。因此$("#btn")之前声明的<button id="btn"></button>返回一个空字符串，因为没有匹配的元素。

Answer 2

可能的答案：

1：您将文件与'//'链接，如'//code.jquery.com'。修理它：将'//'替换为'http：//'

2：你确定你的CSS文件链接正确吗？也许是子文件夹css中的文件。修复它：'/ css / style.css'

如何在本地的html代码中使用javascript脚本

2 个答案: