不同的js文件在同一个HTML中,为什么save_ss()会报错,无法调用

不同的js文件在同一个HTML中,为什么save_ss()会报错,无法调用


html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  head>
  <body>
    <h1 id="header">h1>
    <button onclick="myFunction()">点击我button>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js">script>
    <script src="src/script.js">script>
    <script src="src/script1.js">script>
  body>
html>

script.js

const message = 'Hello world' // Try edit me
// Update header text
document.querySelector('#header').innerHTML = message
// Log to console
console.log(message)
var is_agent
is_agent = 2
function myFunction(){ 
  save_ss()
}

script1.js

function save_ss(){
  const zzzz = "GoGoGo"
  document.querySelector('#header').innerHTML = zzzz
  console.log("haha",is_agent);
};

img

引入script1的script标签放在引入script.js的文件上面

script 是阻塞运行的,浏览器解析原理。
所以在运行script时候,并没有加载script1
所以根本就没有save这个方法,所以报错

代码改成这样,已验证可行,望采纳!!~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
    <script defer src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
  </head>
  <body>
    <h1 id="header"></h1>
    <button onclick="myFunction()">点击我</button>
    <script defer src="src/script.js"></script>
    <script defer src="src/script1.js"></script>
  </body>
</html>

奇怪了一样的代码,我搞下来在我这里运行是ok的,所以按理说两个script调换一下位置就可以了。调换了保存你ctrl+f5强制刷新一下再看看?