为 Mailto 设置 HREF：答案

【问题标题】：Setup HREF for Mailto:为 Mailto 设置 HREF：
【发布时间】：2017-08-04 17:32:18
【问题描述】：

错误消息：无法将属性“innerHTML”设置为 null。

我注意到问题是href="mailto:<a id="Email">... 在"" 中，但是如何在不将mailto 移动到javascript 的情况下更改电子邮件ID？或者有可能吗？

我知道 Javascript 有链接编码，但 HTML 有相同的吗？（例如：href='mailto:'<a id="Email">'...

function Email_Address() {

  var emailaddress = document.getElementByID("EmailAddress").value;
  document.getElementById("Email").innerHTML = emailaddress;

}

Email Address: <input type="text" id="EmailAddress" onkeyup="Email_Address()" onchange="Email_Address()">
<br>
<br>
<a href='mailto:<a id="Email">?subject=Test&body=This%20is%20Test'><button>Email</button></a>

【问题讨论】：

为什么href里面有一个锚标签？
您的锚标记无效
正确的语法是<a href="mailto:user.name@example.com">user.name@example.com</a>。

标签： javascript html html-email

【解决方案1】：

您必须在 javascript 中设置整个 href 标记。你不能用 HTML 做到这一点。请尝试以下操作：

Email Address: <input type="text" id="EmailAddress" onkeyup="Email_Address()" onchange="Email_Address()">
<br>
<br>
<a id="anchorMail"><button>Email</button></a>

在 JS 中：

function Email_Address() {
    var emailaddress = document.getElementByID("EmailAddress").value;
    document.getElementById("anchorMail").href = 'mailto:'+ emailaddress +'?subject=Test&body=This%20is%20Test';
}

【讨论】：

【解决方案2】：

您不能将元素放在属性值中。

把ID放在你已经拥有的锚开始标签上。

使用字符串替换来更改电子邮件地址。

 <a id="Email" href='mailto:PLACEHOLDER?subject=Test&body=This%20is%20Test'>

document.getElementById("Email").href = 
     document.getElementById("Email").href.replace("PLACEHOLDER", emailaddress);

注意：<button> 不能包含在 <a> 中。由于您要链接到 URL，因此请使用 <a>。如果您希望它看起来像一个按钮，请使用 CSS。

【讨论】：

【解决方案3】：

<a href='mailto:<a id="Email">?subject=Test&body=This%20is%20Test'><button>Email</button></a>

上面那行代码是无效的HTML，因为anchor tag specification，您可以花时间阅读，也可以随意跳入@987654323 @ 部分。

所以为了让你的代码有效：

<a href='mailto:someemailaddress@somewhere.org&subject=Test&body=This%20is%20Test' id="email">Email</a>

请注意我是如何从您的<a> 标记中删除<button> 标记的。那是因为没有必要，你可以使用 CSS 来修改上面的 id #email 的锚标签，让它看起来和感觉像一个按钮。这里有很多非常有用的在线参考资料可以帮助您实现这一目标。

现在，在 JavaScript 中，您可以通过使用 id 访问它来修改上述锚元素，如下所示：

function Email_Address() {
  // grabbing the value of an element with ID of `EmailAddress`
  var emailAddress = document.getElementByID("EmailAddress").value;
  // setting the value of `emailaddress` to the element with ID of `email`.
  document.getElementById("email").innerHTML = emailAddress;
}

【讨论】：