Add an onclick function to existing HTML code with DOM

Question

My task is to inject a custom JS function to an HTML code where we cannot edit buttons and HTML it self, just inject some custom HTML code through GUI. What I have in the code:

<input class="ContinueAsAGuest LinkButton" name="submitForm" type="submit" value="Continue as a guest &gt;" />

What I need:

<input class="ContinueAsAGuest LinkButton" name="submitForm" type="submit" value="Continue as a guest &gt;" onclick = "captureOutcome()" />

I wanted to use DOM, but I failed, I stay get the original code. This what I have:

var guest = getElementsByClassName("ContinueAsAGuest LinkButton");

guest.onclick = "captureOutcome()";

function captureOutcome(
{'eventName':'event registration','eventAction':'start' }
);

I am guessing what I miss is to add the actual onclick to the original code. Am I on the right path?

getElementsByClassName is a collection.... – epascarello Mar 29 '18 at 13:39 — epascarello, Mar 29 '18 at 13:39

score 0 · Answer 1 · answered Mar 29 '18 at 13:45

You need to use document.getElementsByClassName to get the element with that class name and if that is a unique class then use [0] to get the reference of that element. By getting the reference you can associate a click function into it.

var guest = document.getElementsByClassName("ContinueAsAGuest LinkButton")[0];

guest.onclick = captureOutcome;

function captureOutcome(){
  alert('clicked!');
};

<input class="ContinueAsAGuest LinkButton" name="submitForm" type="submit" value="Continue as a guest &gt;" />

Add an onclick function to existing HTML code with DOM

1 Answers1