<script> tag works in HTML file but not external .js file

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

您必須在body標簽的末尾添加腳本標簽，或在此事件之間添加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> tag works in HTML file but not external .js file

問題描述

3 個解決方案

解決方案1
2 2019-08-24 20:05:20

解決方案2
0 2019-08-24 20:16:42

解決方案3
0 2019-08-25 08:35:08

<script> tag works in HTML file but not external .js file

問題描述

3 個解決方案

解決方案1 2 2019-08-24 20:05:20

解決方案2 0 2019-08-24 20:16:42

解決方案3 0 2019-08-25 08:35:08

解決方案1
2 2019-08-24 20:05:20

解決方案2
0 2019-08-24 20:16:42

解決方案3
0 2019-08-25 08:35:08