Mrthdrb

When did Lisp start using symbols for arithmetic?

Unreliable Magic - Is it worth it?

Should I tutor a student who I know has cheated on their homework?

How to count occurrences of text in a file?

Why does GHC infer a monomorphic type here, even with MonomorphismRestriction disabled?

Inappropriate reference requests from Journal reviewers

Can the Reverse Gravity spell affect the Meteor Swarm spell?

Visit to the USA with ESTA approved before trip to Iran

Example of a Mathematician/Physicist whose Other Publications during their PhD eclipsed their PhD Thesis

Explicit solution of a Hamiltonian system

% symbol leads to superlong (forever?) compilations

How to be diplomatic in refusing to write code that breaches the privacy of our users

Customer Requests (Sometimes) Drive Me Bonkers!

Grabbing quick drinks

How to write the block matrix in LaTex?

Implement the Thanos sorting algorithm

Can a caster that cast Polymorph on themselves stop concentrating at any point even if their Int is low?

What size rim is OK?

Describing a person. What needs to be mentioned?

Whats the best way to handle refactoring a big file?

The King's new dress

Term for the "extreme-extension" version of a straw man fallacy?

What does this shorthand mean?

Is there a good way to store credentials outside of a password manager?

Magento 2 how to add a Javascript addeventlistener to element

0

I am trying to add an event listener to an element, but no matter what I try, it won't work. Here is what I have so far (this is in the html web templates page):

window.addEventListener('load',function()
 document.getElementById('authnetcim-submit').addEventListener("click", function()
 alert('Alert Message');
 );
 );

Everyone keeps saying that the listener needs to be wrapped in window.addEventListener('load'), as you need to wait for the page to load before you can add the listeners, but that still won't work for me either. There are no errors and nothing logs to the console. The Id is correct and it's the only id of that name used on the page.

Any help is appreciated.

magento2 magento2.2 javascript

share|improve this question

asked 2 days ago

Eric BrownEric Brown

1456

add a comment | 

0

I am trying to add an event listener to an element, but no matter what I try, it won't work. Here is what I have so far (this is in the html web templates page):

window.addEventListener('load',function()
 document.getElementById('authnetcim-submit').addEventListener("click", function()
 alert('Alert Message');
 );
 );

Everyone keeps saying that the listener needs to be wrapped in window.addEventListener('load'), as you need to wait for the page to load before you can add the listeners, but that still won't work for me either. There are no errors and nothing logs to the console. The Id is correct and it's the only id of that name used on the page.

Any help is appreciated.

magento2 magento2.2 javascript

share|improve this question

asked 2 days ago

Eric BrownEric Brown

1456

add a comment | 

I am trying to add an event listener to an element, but no matter what I try, it won't work. Here is what I have so far (this is in the html web templates page):

window.addEventListener('load',function()
 document.getElementById('authnetcim-submit').addEventListener("click", function()
 alert('Alert Message');
 );
 );

Everyone keeps saying that the listener needs to be wrapped in window.addEventListener('load'), as you need to wait for the page to load before you can add the listeners, but that still won't work for me either. There are no errors and nothing logs to the console. The Id is correct and it's the only id of that name used on the page.

Any help is appreciated.

magento2 magento2.2 javascript

share|improve this question

asked 2 days ago

Eric BrownEric Brown

1456

window.addEventListener('load',function()
 document.getElementById('authnetcim-submit').addEventListener("click", function()
 alert('Alert Message');
 );
 );

share|improve this question

asked 2 days ago

Eric BrownEric Brown

1456

share|improve this question

asked 2 days ago

Eric BrownEric Brown

1456

asked 2 days ago

Eric BrownEric Brown

1456

asked 2 days ago

Eric BrownEric Brown

1456

1 Answer
1

active

oldest

votes

0

You only need the domReady! dependency. If you're in Magento 2, you should be using require JS anyways. Here's the best of both worlds.

define([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

OR require instead of define. Depends on how you're calling the functionality.

require([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

share|improve this answer

answered yesterday

Shawn AbramsonShawn Abramson

2,4871915

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried this out, but it still wasn't working. I'm getting the error "Cannot read property 'addEventListener' of null." I added in a .phtml file require([ 'domReady!' ], function () alert('phtml loaded'); var getElementById = document.getElementById("billing-address-same-as-shipping-authnetcim"); document.getElementById('authnetcim-submit').addEventListener("click", function() alert('Alert Message'); ); );
  
  – Eric Brown
  yesterday
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  console.log(window) to see if window is null. If it is you have a different issue
  
  – Shawn Abramson
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's not null, it prints Window object.
  
  – Eric Brown
  23 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  how does the authnetcim-submit element get output to the page?
  
  – Shawn Abramson
  23 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I believe it's through Knockout.
  
  – Eric Brown
  6 hours ago
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f267529%2fmagento-2-how-to-add-a-javascript-addeventlistener-to-element%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You only need the domReady! dependency. If you're in Magento 2, you should be using require JS anyways. Here's the best of both worlds.

define([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

OR require instead of define. Depends on how you're calling the functionality.

require([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

share|improve this answer

answered yesterday

Shawn AbramsonShawn Abramson

2,4871915

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried this out, but it still wasn't working. I'm getting the error "Cannot read property 'addEventListener' of null." I added in a .phtml file require([ 'domReady!' ], function () alert('phtml loaded'); var getElementById = document.getElementById("billing-address-same-as-shipping-authnetcim"); document.getElementById('authnetcim-submit').addEventListener("click", function() alert('Alert Message'); ); );
  
  – Eric Brown
  yesterday
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  console.log(window) to see if window is null. If it is you have a different issue
  
  – Shawn Abramson
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's not null, it prints Window object.
  
  – Eric Brown
  23 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  how does the authnetcim-submit element get output to the page?
  
  – Shawn Abramson
  23 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I believe it's through Knockout.
  
  – Eric Brown
  6 hours ago
  

  
  
  
  

add a comment | 

0

You only need the domReady! dependency. If you're in Magento 2, you should be using require JS anyways. Here's the best of both worlds.

define([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

OR require instead of define. Depends on how you're calling the functionality.

require([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

share|improve this answer

answered yesterday

Shawn AbramsonShawn Abramson

2,4871915

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried this out, but it still wasn't working. I'm getting the error "Cannot read property 'addEventListener' of null." I added in a .phtml file require([ 'domReady!' ], function () alert('phtml loaded'); var getElementById = document.getElementById("billing-address-same-as-shipping-authnetcim"); document.getElementById('authnetcim-submit').addEventListener("click", function() alert('Alert Message'); ); );
  
  – Eric Brown
  yesterday
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  console.log(window) to see if window is null. If it is you have a different issue
  
  – Shawn Abramson
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's not null, it prints Window object.
  
  – Eric Brown
  23 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  how does the authnetcim-submit element get output to the page?
  
  – Shawn Abramson
  23 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I believe it's through Knockout.
  
  – Eric Brown
  6 hours ago
  

  
  
  
  

add a comment | 

You only need the domReady! dependency. If you're in Magento 2, you should be using require JS anyways. Here's the best of both worlds.

define([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

OR require instead of define. Depends on how you're calling the functionality.

require([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

share|improve this answer

answered yesterday

Shawn AbramsonShawn Abramson

2,4871915

define([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

require([
 'domReady!'
], function () 
 'use strict';

 //do your thing here
);

share|improve this answer

answered yesterday

Shawn AbramsonShawn Abramson

2,4871915

answered yesterday

Shawn AbramsonShawn Abramson

2,4871915

answered yesterday

Shawn AbramsonShawn Abramson

2,4871915