在HTML文件中调用外部JS文件中的Javascript函数

Question

在HTML文件中调用外部JS文件中的Javascript函数

3

我无法从一个HTML文件中调用外部JavaScript文件中的函数。请指导我哪里出了错误...

我已更新js文件。

文件1：A.js

    (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
function sayHello(){
    console.log("hello");
}





},{}]},{},[1]);

文件2：index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<div>
    <button onclick="sayHello()">click Me</button>
    <script type="text/javascript" src="bundle1.js"></script>
  </div>
<div>
  <button type="button">rotate me</button>
</div>
</body>
</html>

现在，每当我运行HTML文件时，在点击sayHello()按钮后会出现错误“未找到sayHello()”。

命令：browserify A.js -o bundle1.js

请帮我找出错误！

- akshit bhatia

2

你可以在HTML5中删除错误的type =“”或使用“text / javascript”进行修复。 - progysm

另外，在修复后，我建议您将<script>标签移至<head>的内部或完全移到<body>底部，这将使您的代码更易读。 - Calvin Nunes

一个类似的问题已经在这里得到了回答：https://dev59.com/AWkw5IYBdhLWcg3w9_Qi - Greed

1

如果browserify将您的代码包装在函数内部，则sayHello不再处于全局范围内，因此inline属性无法使用它。您可以在按钮上添加单击事件侦听器document.querySelector('button').addEventListener('click', sayHello)（好），或者您可以通过window.sayHello = sayHello;使您的sayHello全局化（不好）。 - progysm

@progysm 你好，我按照你的建议操作了，但是每次在node.js上使用ng serve运行时，browserified代码都无法加载。其次，如果我直接在浏览器中运行html文件而不使用node或其他应用程序，则不会抛出任何错误，但控制台上没有任何输出。另外，如果我这样做：document.querySelector('button').addEventListener('click', function(){console.log("hello"}), 那么"hello"就会被打印到控制台上。那我错过了什么？ - akshit bhatia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Unmitigated · Accepted Answer

将脚本类型更改为"text/javascript"或直接省略，因为在HTML5中不再需要它。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<div>
    <button onclick="sayHello()">click Me</button>
    <script type="text/javascript" src="A.js"></script>
  </div>
<div>
  <button type="button">rotate me</button>
</div>
</body>
</html>