Event listener not running in Chrome

Question

I’m having an issue with Chrome. I have tried to create a button that adds a new <input> tag when the button is pressed. Now, the below code works totally fine on Internet Explorer, however in Chrome nothing happens at all.

I also get no errors in the console; the function just doesn’t seem to run.

I’ve tried replacing the $("#addto").append(input1); with just alert("hello world");, just to see if the code ran at all, and it doesn’t.

I’ve also just noticed that this works fine if you put the JavaScript inside a <script> tag on the HTML page but it’s only when it’s in a separate .js file that it won’t work.

It looks like my Chrome version isn’t properly working. I’ve downloaded Chrome Portable and that has fixed the issue.

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);
  }
}

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

This works fine for me once I added `jQuery` and `#addto`. To go off your edit, is the seperate file included in the html with a ` — Jimenemex, Jul 25 '18 at 20:27
"but its only when it's in a separate js file that it wont work." Did you include that file? — Max Baldwin, Jul 25 '18 at 20:31
@Jimenemex yes the file is in a script tag. and i know it's working as there are other function being call that draw a bar chart that shows. Also this all works in internet explorer. — adam Wadsworth, Jul 25 '18 at 21:07

score 0 · Answer 1 · answered Jul 25 '18 at 20:59

0

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>

Your code actually works

answered Jul 25 '18 at 20:59

Fabian Gonzalez

29
3

I know it does but only in internet explorer or if the JavaScript is in the same file as the HTML in a – adam Wadsworth Jul 25 '18 at 21:02
I've done the test with multiple files... same result https://embed.plnkr.co/yfdWyR6CUvMRO9MKvF3y/ – Fabian Gonzalez Jul 25 '18 at 21:06
Maybe would be a good idea check on the browser's console, maybe something is happening with your code locally – Fabian Gonzalez Jul 25 '18 at 21:07

score -1 · Answer 2 · answered Jul 25 '18 at 20:31

-1

If you are not using Jquery make sure you run the script after the button element is created.

If you're using jquery replace window.onload for

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

or

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

the reason is because window.onload , runs the script on the go, probably before the button is even created, with jquery you must wait for the document to be fully loaded in order to work with elements

answered Jul 25 '18 at 20:31

Fabian Gonzalez

29
3

This is false. `load` runs _after_ `DOMContentLoaded`. – Sebastian Simon Jul 25 '18 at 20:35
i tried both and neither of these worked and it also doesn't explain why it works in IE but not chrome. – adam Wadsworth Jul 25 '18 at 20:38

Юра Панарин · Answer 3 · 2018-07-25T21:07:52.497

-1

One of solution put js file in before close tag </body> first jquery file, after yours, and you can remove 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);
}

edited Jul 25 '18 at 21:07

answered Jul 25 '18 at 20:39

Юра Панарин

839
8
11

This doesn't seem to have worked i'm still getting nothing happening – adam Wadsworth Jul 25 '18 at 20:45
May be you just forget add selector #addto on page? – Юра Панарин Jul 25 '18 at 20:53
This will work as it's in the same file as html, the issue is that when the JS is in another js file it wont work in chrome but will work in internet explorer – adam Wadsworth Jul 25 '18 at 21:05
@adamWadsworth i updated, works of course fine, i am sure problem in you side(mb adblock or something else) – Юра Панарин Jul 25 '18 at 21:08
You were correct there is something broken on my chrome, I downloaded chrome portable (clean chrome) and it now works. This has wasted so much of my time. Thank you for your help. I don't know what is causing it though as i have disabled all my extensions – adam Wadsworth Jul 25 '18 at 21:18

Event listener not running in Chrome

3 Answers3

Linked