Is there a way to get a value of a javascript variable in a HTML element?

I know this sounds stupid and pointless but I am trying to make a website which finds an email address from the entered initial and surname of a person for my workplace. It just has 2 text input fields, one for the initial and one for the surname. My JavaScript joins these with the layout of the email and sets it as the variable “email”. How would I set this to a button’s href tag using “mailto:”? I tried using onmouseover="this.href = 'mailto:'+email;" yet it just returns undefined;‎

function buildEmail() {
  var initial = document.getElementById("initial").value;
  var surname = document.getElementById("surname").value;
  var email = initial + surname + "@[emaildomain.com]"
}
<h1>Enter the first initial</h1>
<br>
<input type="text" id="initial" />
<br>
<h2>Enter the surname</h2>
<br>
<input type="text" id="surname" />
<br>
<button>
  <a onClick=myFunction() onmouseover="this.href = 'mailto:'+email">Click to send email</a>
</button>

Answer

The issue you have is you have the buildEmail which is not called. And the fact when it is called, the variable email is a scoped to the function so it is not global.

Just call the function onmousedown and set the href so the click will cause the mailto to fire.

function buildEmail(event) {
  var initial = document.getElementById("initial").value;
  var surname = document.getElementById("surname").value;
  var email = initial + surname + "@example.com"
  event.target.href = "mailto:" + email;
}
<center><h1>Enter the first initial</h1>
<br>
<input type="text" id="initial" />
<br>
<h2>Enter the surname</h2>
<br>
<input type="text" id="surname" />
<br>
<button><a onmousedown="buildEmail(event)">Click to send email</a></button>