Question

我在使用Chrome时遇到问题。我试图创建一个按钮，当按下按钮时添加一个新的AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.timetable.Renderer is not a function at AppComponent.push../src/app/app.component.ts.AppComponent.addTimeTable (app.component.ts:39) at new AppComponent (app.component.ts:25)标签。现在，以下代码在Internet Explorer上完全可以正常运行，但是在Chrome中什么也没发生。

我在控制台中也没有收到任何错误；该功能似乎无法运行。

我试图用<input>代替$("#addto").append(input1);，只是为了看看代码是否完全运行了。

我还注意到，如果将JavaScript放在HTML页面上的alert("hello world");标记内，则此方法很好用，但是仅当它在单独的<script>文件中时，它才起作用

我的Chrome版本似乎无法正常工作。我已经下载了Chrome Portable，并且已经解决了该问题。

.js

window.onload = function() {
  var buttonElement = document.getElementById("addinput");

  if (buttonElement) {
    buttonElement.addEventListener('click', addinput);
  }

  function addinput() {
    var input1 = '<div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Name</span></div><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div>';
    
    $("#addto").append(input1);
  }
}

Answer 1

window.onload=function() {
  var buttonElement = document.getElementById("addinput");

  if (buttonElement) {
    buttonElement.addEventListener('click', addinput);
  }

  function addinput() {
    var input1 = '<div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Name</span></div><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div>';
    $("#addto").append(input1);
  }
}

 <div class="modal-footer">
        <button id="addinput" type="button" class="btn btn-default">add</button>
        <div id="addto"></div>
    </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

您的代码实际有效

Answer 2

如果您不使用Jquery，请确保在创建button元素之后运行脚本。

如果您使用的是jquery，请将window.onload替换为

$( document).ready( function(){
 //Initial code goes here
});

或

| async

原因是因为window.onload可能在创建按钮之前就在旅途中运行了脚本，使用jquery您必须等待文档完全加载才能使用元素

Answer 3

一种解决方案将js文件放在关闭标签</body>之前的第一个jquery文件之前，然后将window.onload删除

index.html

<head>

</head>

<body>
    <div class="modal-footer">
        <button id="addinput" type="button" class="btn btn-default">add</button>
        <div id="addto"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <script src="./main.js">
    </script>
</body>

</html>

main.js

var buttonElement = document.getElementById("addinput");

if (buttonElement) {
    buttonElement.addEventListener('click', addinput);
}

function addinput() {
    var input1 = '<div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Name</span></div><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div>';
    $("#addto").append(input1);
}

事件监听器未在Chrome中运行

3 个答案: