Creating email link on click with javascript

Updated: February 4, 2020 by Tony Alves

We want to try to obfuscate our email from spam page scrapers. Not everything works, but we can slow down scrapers in some instances.

<a id="email" href="#">Email Me</a>

var link = document.getElementById("email");
link.onclick = function (event) {
  var name = "you";
  var domain = "example.com";
  var linker = "mailto:" + name + "@" + domain + "?subject=Data&body=Your+Message";
  link.setAttribute("href", linker);
};

Something for React

This page uses React, so we'll show the example we included on this page (see Email link below).

export const EmailLink = ({ name='me', rd='example', tld='com'}) => {
  const link = React.useRef();
  const [me, setMe] = React.useState('');
  const clickHandler = function (event) {
    const liame = `${name}@${rd}.${tld}`;
    setMe(liame);
    link.current.setAttribute("href", `mailto:${liame}?subject=Data&body=Your+Message`);
  };
  return (<a ref={link} href="#" onClick={clickHandler}>Email{me ? ` ${me}`: ''}</a>)
}

To render on your page. Email

<EmailLink name="someone" rd="mailinator" />