如何修复script标签src属性？按钮无法调用run函数问题排查

安全阿岳

2026-5-9

解决按钮无法调用run()函数的问题

我来帮你排查并解决这个问题，核心是两个关键点导致了函数无法被正常触发：

1. 脚本加载顺序导致函数未提前定义

你的<script>标签放在了</body>之后，浏览器是从上到下解析HTML的——当解析到按钮的onclick属性时，index.js里的run()函数还没被加载执行，全局作用域里找不到这个函数，自然无法触发。

2. 内联`onclick`的写法问题（你已修正部分，但加载顺序问题仍存在）

你最初写的onclick="run"是错误的，需要写成onclick="run()"才能执行函数，但即使修正了这个写法，加载顺序的问题还是会导致函数未被识别。

解决方案一：调整脚本加载位置（快速修复）

把script标签移到<body>内部、按钮元素之前，这样解析按钮时函数已经存在：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="index.js"></script>
<button onclick="run()">Hello World</button>
</body>
</html>

解决方案二：使用事件监听器（更推荐的现代写法）

保持脚本在原位置，通过JS给按钮绑定事件监听器，确保DOM加载完成后再绑定事件，同时避免内联事件的耦合问题：

首先修改HTML，移除内联onclick：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="helloBtn">Hello World</button>
</body>
<script src="index.js"></script>
</html>

然后修改index.js代码，添加事件绑定逻辑：

function run() { 
  console.log('Example'); 
  alert('触发成功！'); // 给alert添加参数，避免空弹窗
}

// 等待DOM加载完成后绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
  const helloBtn = document.getElementById('helloBtn');
  helloBtn.addEventListener('click', run);
});