如何在邮件模板中实现点击按钮修改文本颜色？

Hey there! Let's tackle your two email template issues one by one:

1. Why your JavaScript doesn't work in sent emails #

The core problem here is that almost all mainstream email clients (Gmail, Outlook, Apple Mail, etc.) completely disable JavaScript for security and performance reasons. Your code works locally because browsers allow JS, but once sent as an email, the JS gets stripped or ignored entirely—no console errors because the JS never runs at all.

Fix: Use CSS for interactive effects (no JS needed) #

Instead of relying on JavaScript, you can use CSS pseudo-classes to achieve the "click to change text color" effect. Here's a modified version of your template that works in most email clients:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Trigger color change when any element inside the container is focused/clicked */
        .interactive-container:focus-within #text {
            color: blue !important;
        }
        /* Style the button for better visibility */
        .confirm-btn {
            padding: 10px 24px;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        /* Fallback for clients that don't support :focus-within (clicking the text directly) */
        #text:active {
            color: blue !important;
        }
        /* Make the container focusable */
        .interactive-container {
            outline: none;
            tabindex: 0;
        }
    </style>
</head>
<body>
    <center><h1>We're glad you're here, {{.GetAccountName}}</h1></center>
    <center class="interactive-container">
        <div id="text">We just want to confirm it's you.<br><br></div>
        <button class="confirm-btn">
            Click to confirm your email address
        </button>
    </center>
    <center><br>If you didn't create a proctl account, just delete this email.</center>
</body>
</html>

How this works:

• :focus-within targets the container when its child button is clicked (and gains focus), changing the text color.
• :active acts as a fallback for older clients that don't support :focus-within—it changes the color when the text itself is clicked.
• We added tabindex="0" to the container to make it focusable, ensuring the :focus-within trigger works across clients.

2. The "Unchecked runtime.lastError" message #

Don't worry about this one—it has nothing to do with your email code. This error comes from a browser extension (like ad blockers, password managers, or dev tools plugins) that's using Chrome's runtime API incorrectly. The extension's message port closed before it could receive a response, causing the error.

To confirm, try disabling all your browser extensions temporarily—you'll see the error disappear. No changes to your email template are needed here.

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