1

I am trying to get my userText output to display the userEmail as a hyperlink that will open an email service with the email addressed to the userEmail. What am I doing wrong? The hyperlink shows up if I use variable emailLink (instead of userEmail) but then it doesn't work with the href tag thus the email is addressed to the a href tag. Not sure what else to try....Help please and thanks....

<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>
Corina
  • 85
  • 9

2 Answers2

1

You were leaving the content between the opening and closing a tags empty so there was nothing for the user to see to click on. In addition, you have a backslash in the opening <a> tag that shouldn't be there.

'<a href="mailto:' + userEmail + '\"></a>'
------------------------------------^^    // <-- content between open/close is empty!

So, it should be:

'<a href="mailto:' + userEmail + '">' + userEmail + '</a>'

Also, don't use .link() as it's unnecessary and outdated.

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>

But, for a cleaner and more modern approach. Avoid all the concatenation of strings completely by just having empty elements standing by that need to be populated. Also, don't use inline HTML event handling attributes (onclick, etc.) as they are a 25+ year old ancient technique that just will not die and have many drawbacks. Instead, use modern standards and .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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

You are missing the inner text inside of the a element:

  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 + '\">The link!</a>' ; document.getElementById('text').innerHTML=userText;    

        }
<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>
Javier Gonzalez
  • 915
  • 6
  • 14