在HTML语言中调用外部JavaScript文件中的函数

发布于03月07日

我正在学习HTML语言，并在StackBlitz浏览器内IDE中练习.我试图使用元素的onclick来更改<p>元素的文本，但当我单击按钮时没有任何react .

index.html文件中的代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>

  <body>

    <p id="words">Starting Text</p>
    <button onclick="change()">Change Words</button>

  </body>

</html>

script.js文件中的代码:

function change() {
  document.getElementById("words").innerText = 'Words Have Been Changed';
}

index.html和script.js都位于StackBlitz项目目录的根文件夹中.

我不知道我是否遗漏了一个明显的语法错误，或者我对StackBlitz IDE有什么不理解的地方，或者其他什么.我try 将alert()函数赋值给onclick，以及在HTML中定义的定制函数，这些都有效.只是当所分配的函数来自script.js文件时，什么都不会发生.

<script type="module"> function change() { document.getElementById("words").innerText = 'Words Have Been Changed'; } Object.assign(window, {change}); </script> <p id="words">Starting Text</p> <button onclick="change()">Change Words</button>

在HTML语言中调用外部JavaScript文件中的函数

推荐答案

Javascript相关问答推荐

如何指定1条记录1个表？

如何在不分配整个数组的情况下修改包含数组的行为主体？

从PWA中的内部存储读取文件

if/else JavaScript中的条件行为

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

Redux查询多个数据库Api reducerPath&

如何在不创建新键的情况下动态更改 map 中的项目？

在服务器上放置了Create Reaction App Build之后的空白页面

如何控制Reaction路由加载器中的错误状态？

我正在建立一个基于文本的游戏在react ，我是从JS转换.我怎样才能使变量变呢？

查询参数中的JAVASCRIPT/REACT中的括号

Nextjs 13.4 Next-Auth 4.2登录(&Quot；凭据&，{})；不工作

如何在DYGRAPS中更改鼠标事件和键盘输入

如何限制显示在分页中的可见页面的数量

在GraphQL解析器中修改上下文值

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

我的NavLink活动类在REACT-ROUTER-V6中出现问题

bootstrap S JS赢得了REACT中的函数/加载

JSX/React -如何在组件props 中循环遍历数组

ReactJS Sweep Line：优化SciChartJS性能，重用wasmContext进行多图表渲染