如何实现HTML按钮自动点击？现有代码失效及Continue按钮自动点击求助

Let's tackle your problems one by one to get everything working properly:

1. Fixing Your Existing HTML Code Issues #

Your current code has a couple of key problems that are preventing it from running smoothly:

• Missing jQuery Library: You’re using jQuery() calls but haven’t included the jQuery script file, so the browser has no idea what jQuery means.
• Timing & Event Binding Issues: Trying to trigger a click on the checkbox before the DOM is fully loaded might fail, and your inline event handlers can be cleaned up for better maintainability.
• Invalid Embed URL: The src value MY WEBSITE LINK needs to be replaced with a valid, full URL (like https://your-actual-site.com).

Here's the corrected version of your code:

<h1>Welcome to My Page!</h1>
<h2>My name is Bob.</h2>
<h3>I hope you like it here.</h3>
<!-- Replace with your real website URL -->
<embed src="https://your-website-url.com" style="width:500px; height: 300px;">
<input type="checkbox" id="btd">

<!-- Include jQuery first (use a reliable CDN) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// Wait for the entire DOM to load before running our code
$(document).ready(function() {
  // Bind mouseover event to the checkbox
  $('#btd').on('mouseover', function() {
    // Replace this with your actual `myFunction` logic if needed
    console.log("Mouse hovered over checkbox!");
  });
  
  // Bind click event with alert
  $('#btd').on('click', function() {
    alert('clicked');
  });
  
  // Trigger the checkbox click automatically
  $('#btd').click();
});
</script>

2. Auto-Clicking the "Continue" Button #

To automatically click the "Continue" button from your referenced image, you need to target the button correctly and trigger the click once it’s available in the DOM. Here’s how to do it:

Step 1: Find the Button’s Unique Selector #

First, identify a way to target the button. Use your browser’s dev tools (right-click the button > Inspect) to get one of these:

• ID: If the button has an ID like continue-btn, use #continue-btn
• Class: If it has a unique class like .primary-action-btn, use .primary-action-btn
• Text: If the button’s text is exactly "Continue", you can target it by its content

Step 2: Implement the Auto-Click Logic #

Choose one of these approaches based on whether you’re using jQuery or vanilla JavaScript:

Option A: Using jQuery

$(document).ready(function() {
  // Add a small delay to make sure the button loads (adjust the time if needed)
  setTimeout(function() {
    // Replace with your actual selector (e.g., '#continue-btn' or 'button:contains("Continue")')
    const continueBtn = $('button:contains("Continue")');
    if (continueBtn.length) {
      continueBtn.click();
      console.log("Continue button clicked automatically!");
    } else {
      console.log("Continue button not found yet—try increasing the delay.");
    }
  }, 1000); // 1 second delay
});

Option B: Using Vanilla JavaScript (No jQuery Needed)

document.addEventListener('DOMContentLoaded', function() {
  // Function to check for the button and click it
  function autoClickContinue() {
    // Replace with your actual selector (e.g., 'button#continue-btn')
    // Fallback: Find button by text if selector isn't available
    const allButtons = document.querySelectorAll('button');
    const continueBtn = Array.from(allButtons).find(btn => btn.textContent.trim() === "Continue");
    
    if (continueBtn) {
      continueBtn.click();
      console.log("Continue button clicked automatically!");
    } else {
      // If button isn't loaded yet, check again after 500ms
      setTimeout(autoClickContinue, 500);
    }
  }
  
  // Start checking for the button
  autoClickContinue();
});

Key Notes: #

• If the button loads dynamically (e.g., after an AJAX call), the repeated check approach (like the vanilla JS example) works better than a single delay.
• Always test your selector in the browser’s dev console first to make sure it targets the right button.

内容的提问来源于stack exchange，提问作者user7775547