Question

Javascript代码嵌入在HTML中，但想要在JS脚本外部进行链接，而不是将其放在HTML中但我最终会遇到一些全局或局部变量问题，其中函数在定义之前运行

对此问题的任何帮助？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
  <title>JavaScript label example</title>
  <style>
    p {
      font-family: 'helvetica neue', helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-align: center;
      border: 2px solid rgba(0,0,200,0.6);
      background: rgba(0,0,200,0.3);
      color: rgba(0,0,200,0.6);
      box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
      border-radius: 10px;
      padding: 3px 10px;
      display: inline-block;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>Player 1: Chris</p>
</body>
<script>
var para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}
</script>

</html>

我猜我会把<script src="js/script.js"></script>放在html页面的底部？

如果不是我收到错误

'updateName'之前使用过   定义。 para.addEventListener（'click'，updateName）;
     在定义之前使用了
'prompt'。 var name = prompt（'输入一个   新名称'）;

Answer 1

＆＃39; updateName＆＃39;在定义之前使用过。 para.addEventListener（＆＃39; click＆＃39;，updateName）;

您的代码：

para.addEventListener('click', updateName);
function updateName() {

在定义之前在线上使用它。

吊装意味着这并没有任何实际效果，但你的linting工具认为它很糟糕。

＆＃39;提示＆＃39;在定义之前使用过。 var name = prompt（＆＃39;输入新名称＆＃39;）;

prompt是一个网络API。它不是JavaScript本身的一部分。您的linting工具未配置为期望JavaScript在浏览器中运行。你需要重新配置它。

Answer 2

默认情况下，script标记按照它们在源代码中出现的顺序进行评估。将script标记替换为从外部文件加载相同代码的标记应该是等效的。

如果您想在head中引用该脚本，请使用defer attribute。

如何在外部运行此代码？

2 个答案: