使用DOM [duplicate]向现有HTML代码添加onclick函数

Question

这个问题在这里已有答案：

• What do querySelectorAll and getElementsBy* methods return? 9个答案

我的任务是为HTML代码注入一个自定义JS函数，我们无法自己编辑按钮和HTML，只需通过GUI注入一些自定义HTML代码。我在代码中有什么：

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

我需要的：

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

我想使用DOM，但是我失败了，我留下了原始代码。这就是我所拥有的：

var guest = getElementsByClassName("ContinueAsAGuest LinkButton");

guest.onclick = "captureOutcome()";

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

我猜我错过的是将实际的onclick添加到原始代码中。我在正确的道路上吗？

Answer 1

你需要使用document.getElementsByClassName来获取具有该类名的元素，如果这是一个唯一的类，那么使用[0]来获取该元素的引用。通过获取引用，您可以将单击函数关联到它中。

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;" />