Javascript 无法执行onclick处理程序的故障排除_Javascript_Html

Javascript 无法执行onclick处理程序的故障排除

javascript html

Javascript 无法执行onclick处理程序的故障排除,javascript,html,Javascript,Html,接下来，我发现我无法执行像这里设置的处理程序那样的“onclick”处理程序：函数处理程序（）{ 控制台日志（5）； } 如果html元素已完成加载，请确保添加侦听器 document.onload = function(){ function handler(){ console.log(5); } } 您还可以使用导出和导入。导出函数并将其导入到js_test.jsdo中的另一个文件中 export function handler() { console.l

接下来，我发现我无法执行像这里设置的处理程序那样的“onclick”处理程序：

函数处理程序（）{
控制台日志（5）；
}

如果html元素已完成加载，请确保添加侦听器

document.onload = function(){
   function handler(){
     console.log(5);
   }
}

您还可以使用导出和导入。导出函数并将其导入到

js_test.js

do中的另一个文件中

export function handler() {
  console.log(5);
}

(function _module_x (global) {

  global.myNamespace = global.myNamespace || {};

  global.myNamespace.handler = _handler_;

  function _handler_ () {
    console.log(5);
  }
})(window);  // or })( (function(){return this;})() ); // this works for both Node.js and html

在html中做什么

<html>
</head>
  <script type="module" src="../js/js_test.js"></script>

  <script type="module">
    import {handler} from '../js/js_test.js';

    document.onload = function(){
      document.getElementById('myButton').addListener("click", handler);
    };

  </script>
</head>
<body>
   <button id="myButton"></button>
</body>
</html>

<html>
</head>
  <script src="../js/js_test_old.js"></script>
</head>
<body>
   <button onclick="myNamespace.handler()"></button>
</body>
</html>

在html中做什么

<html>
</head>
  <script type="module" src="../js/js_test.js"></script>

  <script type="module">
    import {handler} from '../js/js_test.js';

    document.onload = function(){
      document.getElementById('myButton').addListener("click", handler);
    };

  </script>
</head>
<body>
   <button id="myButton"></button>
</body>
</html>

<html>
</head>
  <script src="../js/js_test_old.js"></script>
</head>
<body>
   <button onclick="myNamespace.handler()"></button>
</body>
</html>

这肯定行不通<代码>处理程序在

onload

之外将不可见。您确定脚本文件已加载到该页面上吗？脚本被添加到页面的头部？请看。您缺少一些

导出

和

导入

@AlwayShelling yes（1）内联处理程序只能引用全局变量（2）模块的顶级不是全局的。因此，您需要找到另一种方法——最好避免使用内联处理程序；通过JS连接侦听器。改为使用上一个代码段-通过分配

.onclick=handler

，或使用

按钮。addEventListener（'click'，handler）

，这将成功绕过作用域问题。顶级变量将成为全局标识符（当JS看到哪些变量名绑定到哪些值时，将其放入最顶层的词典环境中），因此页面上的任何内容都可以引用该变量。如果该变量是用

var

声明的，或者是一个函数声明，它也将自动添加为全局对象的属性（

window

）。窗口上的属性是“全局”的，因为它们也可以在任何地方引用。它与全局标识符并不完全相同，但在绝大多数情况下也可能是。您建议我导出什么以及将其导入到何处？谢谢。出现错误“无法在模块外使用导入语句”添加

类型=第二个标记
中的“module”

仍然会得到与我的帖子中相同的错误。对于模块来说，引用处理程序作为

.html

文件中属性的值仅意味着当处理程序作为“内联”javascript（

.html

文件中脚本标记的内容）出现时才起作用这似乎很烦人！我把我的模块变成普通模块后，它就可以工作了script@tonitone120Yes处理程序仅在脚本标记内可见，但您可以添加一个侦听器（即事件处理程序）