Question

我真诚地为这个问题道歉，但这是我用javascript编写的第72个小时，由于我不知道的原因，我无法找到这个问题的答案。

我需要能够从外部js文件触发onclick等事件处理程序。这就是我在HTML中链接文件的方式。

<header>
<h1>McMac editing</h1>
<meta charset="utf-8">
<script src="JQuery.js"></script>
<script src="index.js"></script>
</header>

这就是我设置index.js的方式。

var capture = document.getElementById("capture");
capture.onload = function(){console.log="load";};

我最终将使用cordova，并且它说内联JS已被禁用，所以这就是为什么我需要让我的工作正常，现在使用我当前的设置＆＃34; load＆＃34;不会在我的控制台中弹出。

我再次为这个问题道歉，但我不知道该怎么做。

Answer 1

您正尝试使用此代码var capture = document.getElementById("capture");访问尚未加载的“capture”元素。在右下一个语句中，您已写入capture.onload = function(){}。由于浏览器当时没有找到任何名为“capture”的元素，因此它会返回capture。

无法设置null的属性'onload'

你有两种解决方法

<强> 1。在body元素

之后加载index.js

<html>
.
.
</body>
<script src="index.js" type="text/javascript"></script>
</html>

<强> 2。等到所有正文元素都加载到dom中（不使用JQuery）

document.addEventListener("DOMContentLoaded", function(event) 
{
       //Your code 
       var capture = document.getElementById("capture");
       capture.onload = function()
       {
          console.log="load";
       };
}

Answer 2

我尝试以一种不同的方式做到这一点。希望它有所帮助。

INDEX.JS

$(document).ready(function(){
  console.log("Loaded");
  // var capture = document.getElementById("capture");
    $("#capture").click(function(){
        console.log("load");
        alert("Hello!");
    });
});

您的HTML

<html>
    <head>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <h1>McMac editing</h1>
    <meta charset="utf-8">
    <script src="bower_components/jquery/dist/jquery.js"></script>

    <script src="index.js"></script>
    </head>
    <body ng-app="">
          <div id="capture" style="width:100px;height:100px; background-color:#ddd;padding:2; text-align:center; font-weight:bold;">
        Click Here For External JS function Trigger.
      </div>
    </body>
</html>

我正在使用bower，因此jquery的路径是bower组件。

Answer 3

html代码：

<html>
<head>
<title></title>
 <style>
     #capture{
         width: 200px;
         height: 200px;
         background-color: aqua;
     }
 </style>  
</head>

<body>
    <div id="capture"></div>
    <script src="index.js"></script>
</body>
</html>

index.js

var ele = document.getElementById("capture");
ele.onclick = function() {
    console.log("click");
}

注意：onload最常用于body元素中：

html代码：

<html>
<head>
<title></title>
 <style>
 </style>  
</head>
<body id="capture" >
    <script src="index.js"></script>
</body>
</html>

index.js：

var ele = document.getElementById("capture");
ele.onload = function() {
    console.log("load");
}

Answer 4

我认为，如果您将html部分显示在“捕获”部分中，那么获得快速解决方案会更容易。被定义为。 index.js中的javascript代码声明是正确的，具体取决于html代码中的内容。

需要考虑的事项：

1）你的index.js应该与你的html文件在同一个文件夹中。

2）在你的index.js中，你声明了＆＃39; var capture = document.getElementById（＆＃34; capture＆＃34;）;＆＃39;，因此＆＃39; capture＆＃39;应该是html代码中元素的id。

3）你在这里使用onload事件。 onload通常用于＆＃39; body＆＃39;一旦网页完全加载了所有内容，就执行一个脚本元素。

所以如果捕获不是你的html body元素的id，那么可能就是你没有在控制台中看到东西的原因。如果您需要更具体的答案，请显示您的HTML代码。

我希望这会有所帮助。

触发js事件，如来自外部js文件的onclick

4 个答案: