如何通过DOM为不可编辑的HTML提交按钮注入自定义onclick函数？

Hey there! Let's get that captureOutcome() function attached to your "Continue as a guest" button. Since you can't modify the original HTML, using DOM methods is the way to go—here are a few proven solutions, plus why your first attempt might have failed.

Common Reasons Your Initial DOM Attempt Failed #

Before diving into fixes, let's cover the most likely issues:

• Your code ran before the DOM was ready: If your script loaded before the button element existed, querySelector (or similar methods) would return null.
• Incorrect selector: Using the wrong class combination or selector syntax to target the button.
• Function scope issues: The captureOutcome function wasn't defined when you tried to bind it.

Solution 1: Use addEventListener (Recommended) #

This is the most robust approach because it lets you bind multiple events to the same element without overwriting existing ones.

// Wait for the entire DOM to load before running your code
document.addEventListener('DOMContentLoaded', function() {
  // Target the button using its combined class names
  const guestButton = document.querySelector('.ContinueAsAGuest.LinkButton');

  // Make sure we found the button to avoid errors
  if (guestButton) {
    // Bind the click event to your function
    guestButton.addEventListener('click', captureOutcome);

    // Define your custom function
    function captureOutcome(event) {
      // Add your logic here (e.g., track the click, modify behavior)
      console.log('Guest button clicked!');

      // Optional: Prevent the default form submission if needed
      // event.preventDefault();
    }
  } else {
    console.error('Could not locate the "Continue as a guest" button');
  }
});

Solution 2: Directly Set the onclick Attribute #

If you want to replicate the exact HTML structure you mentioned, you can set the onclick property directly:

document.addEventListener('DOMContentLoaded', function() {
  const guestButton = document.querySelector('.ContinueAsAGuest.LinkButton');

  if (guestButton) {
    // Assign the function to the onclick property
    guestButton.onclick = captureOutcome;

    function captureOutcome() {
      console.log('Guest button clicked!');
      // Optional: Stop the form from submitting by returning false
      // return false;
    }
  }
});

Note: This will overwrite any existing onclick handler on the button, so use it only if you're sure there's no existing event to preserve.

Solution 3: Handle Dynamically Loaded Buttons #

If the button is added to the page later (e.g., via AJAX or a component render), DOMContentLoaded won't catch it. Use a MutationObserver to watch for changes in the DOM:

// Create an observer to watch for new elements being added
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    const guestButton = document.querySelector('.ContinueAsAGuest.LinkButton');
    // Only bind the event once to avoid duplicates
    if (guestButton && !guestButton.dataset.eventBound) {
      guestButton.addEventListener('click', captureOutcome);
      guestButton.dataset.eventBound = 'true';
    }
  });
});

// Start observing the entire body for changes
observer.observe(document.body, { childList: true, subtree: true });

// Your custom function
function captureOutcome() {
  console.log('Guest button clicked!');
}

Quick Tips for Success #

• Test your selector: Run document.querySelector('.ContinueAsAGuest.LinkButton') in your browser's DevTools console to confirm it returns the correct element.
• Place scripts strategically: If you don't want to use DOMContentLoaded, put your script right before the closing </body> tag—this ensures the DOM is mostly loaded when the script runs.
• Check for errors: Open your browser's DevTools (F12) and look at the Console tab for any error messages that might point to issues.

内容的提问来源于stack exchange，提问作者László Katona