我正在尝试让我的 userText 输出将 userEmail 显示为一个超链接，该超链接将打开一个电子邮件服务，其中包含发送给 userEmail 的电子邮件。我究竟做错了什么？如果我使用变量 emailLink(而不是 userEmail)，超链接就会显示出来，但它不适用于 href 标签，因此电子邮件被发送到 href 标签。不知道还能尝试什么....请帮忙，谢谢....
<html>
<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required onchange="required();">
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>
<script>
function validateForm() {
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail.link();
var userText = userTown +'\'s a Great Town!' + '<br><br>' + ' If you don\'t believe me, click the link and ask this dude ' + '<a href="mailto:' + userEmail + '\"></a>' ;
document.getElementById('text').innerHTML=userText;
}
</script>
</html>
最佳答案
您在开始和结束之间留下了内容 a标签是空的，所以用户看不到任何东西可以点击。此外，您在开头有一个反斜杠 <a>不应该出现的标签。
'<a href="mailto:' + userEmail + '\"></a>'
------------------------------------^^ // <-- content between open/close is empty!
所以，应该是:
'<a href="mailto:' + userEmail + '">' + userEmail + '</a>'
此外，不要使用 .link()因为它是不必要的和过时的。
function validateForm() {
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail;
var userText =
userTown + '\'s a Great Town!<br><br>If you don\'t believe me, click the link and ask this dude ' +
'<a href="mailto:' + userEmail + '">' + userEmail + '</a>';
document.getElementById('text').innerHTML = userText;
}<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required >
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>但是，为了更简洁、更现代的方法。通过仅保留需要填充的空元素来完全避免所有字符串连接。另外，不要使用内联 HTML 事件处理属性( onclick 等)，因为它们是一种已有 25 年以上历史的古老技术，不会消亡并且具有 many drawbacks。 。相反，使用现代标准和 .addEventListener() .
// Set up event handling in JavaScript, not HTML
document.querySelector("input[type=button]").addEventListener("click", validateForm);
function validateForm() {
var userTown = document.getElementById('town');
var userEmail = document.getElementById('email');
var userElement = document.getElementById("user");
var emailLink = document.getElementById("emailLink");
var output = document.getElementById("text");
// Just configure the properties of the pre-existing elements instead
// of creating gobs and gobs of concatenated strings:
user.textContent = userTown.value;
emailLink.href = userEmail.value;
emailLink.textContent = userEmail.value;
output.classList.remove("hidden"); // Unhide the final paragraph
}.hidden { display:none; }
label {display:inline-block; width:20em;}<form>
<fieldset>
<div>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required >
</label>
</div>
<div>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
</div>
<input type="button" value="Click Me">
</fieldset>
<!-- Notice the class applied to the paragraph? That hides it by default.
Then we have span elements set up as placeholders for dynamic text that
will be inserted by the JavaScript. The same is true for the empty <a> element. -->
<p id="text" class="hidden"><span id="user"></span><span>'s a Great Town!
<br><br>If you don't believe me, click the link and ask this dude </span><a id="emailLink"></a></p>
</form>关于javascript - 无法在 Javascript 中将用户输入作为电子邮件链接返回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48651942/