Question

我编写了这段代码，仅在body标记结束后html文件中具有script标记时才起作用。但是，当我将js代码剪切并粘贴到名为start.js的外部文件中，并在head标记内的html中引用它时，它不起作用。

我尝试过：

<!DOCTYPE html>
<html>
<head>
<title>Start</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="start.css">
<meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

<script src="start.js"></script>

</head>


and this:

<!DOCTYPE html>
<html>
<head>

<title>Start</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="start.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
            awesome/4.7.0/css/font-awesome.min.css">

<script type="text/javascript" src="start.js"></script>

</head>

Answer 1

您必须在此代码的末尾添加脚本标签，或在此事件之间添加js代码

document.addEventListener('load', function(){ })

您收到该文档的错误尚未加载

Answer 2

如果您的脚本中有一个用于处理HTML代码的脚本，则可以使用async属性在内部加载脚本，但是您需要按照指定的那样推迟执行，直到文档加载完毕。处理依赖项时，还可以异步使用负载，这将加快初始渲染的速度。

  <head>
   <script async src="start.js"></script>
  </head>

  // start.js
  document.addEventListener('DOMContentLoaded', function(event) {
    // As mentioned in the other answer, run your code here.
    mycode()
  })

但是，您可能只是将其保留在该部分中，只是确保所需信息在代码上方。在进行诸如小型可视化之类的事情以使事情彼此接近时，有时在HTML部分中加载代码很有用。（对于更复杂的应用程序，最好将它们分开并保持整洁）。

Answer 3

您好，罗伊尔（Rohail）只是在说些什么。并非所有代码都需要进入事件侦听器块，只是文档引用即可。例如，下面是一个简单的摄氏/华氏转换器：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Celsius Fahrenheit Converter</title>
  <script src="57641159.js"></script>
</head>
<body>
  <div>
    F: <input type="number" id="fahr" min="-459.67" step="0.01"> 
    C: <input type="number" id="cels" min="-273.15" step="0.01">
  </div>
</body>
</html>

在javascript注释中，只有与读取DOM相关的代码才需要在已加载的事件内。这有助于简化代码。

const round1 = x => Math.round(x * 10) / 10;

const updateC = () => {
  const c = (fahr.value - 32) * (5/9);
  cels.value = round1(c);
};

const updateF = () => {
  const f = cels.value * (9/5) + 32;
  fahr.value = round1(f);
};

const doDom = () => {
  const fahr = document.querySelector('#fahr');
  fahr.addEventListener('input', updateC);
  const cels = document.querySelector('#cels')
  cels.addEventListener('input', updateF);
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    doDom();
  });
} else {
  doDom();
}

<script>标记适用于HTML文件，但不适用于外部.js文件

3 个答案: