Event listener not running in Chrome
Clash Royale CLAN TAG#URR8PPPEvent listener not running in Chrome
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.
<input>
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.
$("#addto").append(input1);
alert("hello world");
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.
<script>
.js
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>
jQuery
#addto
<script>
"but its only when it's in a separate js file that it wont work." Did you include that file?
– Max Baldwin
yesterday
@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
yesterday
3 Answers
3
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
I know it does but only in internet explorer or if the JavaScript is in the same file as the HTML in a <script> tag if its in a separate JS file chrome will not work.
– adam Wadsworth
yesterday
I've done the test with multiple files... same result embed.plnkr.co/yfdWyR6CUvMRO9MKvF3y
– Fabian Gonzalez
yesterday
Maybe would be a good idea check on the browser's console, maybe something is happening with your code locally
– Fabian Gonzalez
yesterday
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
This is false.
load runs after DOMContentLoaded.– Xufox
yesterday
load
DOMContentLoaded
i tried both and neither of these worked and it also doesn't explain why it works in IE but not chrome.
– adam Wadsworth
yesterday
One of solution put js file in before close tag </body> first jquery file, after yours, and you can remove window.onload
</body>
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);
}
This doesn't seem to have worked i'm still getting nothing happening
– adam Wadsworth
yesterday
@adamWadsworth I add example, working.
– Юра Панарин
yesterday
May be you just forget add selector #addto on page?
– Юра Панарин
yesterday
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
yesterday
@adamWadsworth i updated, works of course fine, i am sure problem in you side(mb adblock or something else)
– Юра Панарин
yesterday
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
This works fine for me once I added
jQueryand#addto. To go off your edit, is the seperate file included in the html with a<script>tag?– Jimenemex
yesterday