How can I write an email address inside a table cell with JavaScript?

Question

I am currently trying to get my code to display the email "cadler@mpl.gov" with javascript however my code is not displaying the text. Any idea what could be causing it?

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = username + "@" + emServer;
document.write("<a href='mailto:" + emLink + "'>");
document.write(emLink);
document.write("</a>");

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>
        <td>555-3100</td>
        <td></td>
</table>

The Javascript should insert the email address in the empty table cell.

Yeah that error would be useful... – Jonas Wilms Jul 29 '17 at 14:42 — Jonas Wilms, Jul 29 '17 at 14:42
Where exactly is that JavaScript code? – Pointy Jul 29 '17 at 14:43 — Pointy, Jul 29 '17 at 14:43
`userName != username`. – Niet the Dark Absol Jul 29 '17 at 14:45 — Niet the Dark Absol, Jul 29 '17 at 14:45
don't use `document.write`! – SuperStormer Jul 29 '17 at 14:52 — SuperStormer, Jul 29 '17 at 14:52

score 3 · Answer 1 · edited Jul 29 '17 at 18:57

Firstly, as others have mentioned, it should be userName, not username.

Secondly, don't use document.write. Use Element.innerHTML or create a textnode to append to the element, combined with editing the href attribute.

The code becomes:

var userName = "cadler",
    emServer = "mpl.gov",
    emLink = userName + "@" + emServer;

document.getElementsByClassName("email")[0].innerHTML = "<a href='mailto:" + emLink + "'>"+emLink+"</a>";

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>               
        <td>555-3100</td>
        <td class="email"></td>
    </tr>
</table>

var userName = "cadler",
    emServer = "mpl.gov",
    emLink = userName + "@" + emServer,
    emTextNode = document.createTextNode(emLink),
    elem = document.getElementsByClassName("email")[0];

elem.setAttribute("href", "mailto:" + emLink);
elem.appendChild(emTextNode);

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>               
        <td>555-3100</td>
        <td class="email"></td>
    </tr>
</table>

As others mentioned, do not use document.write. That said, if you have to use document.write, then put the code inside the td:

<td class="email">
    <script>
        var userName = "cadler",
            emServer = "mpl.gov",
            emLink = userName + "@" + emServer;

        document.write("<a href='mailto:" + emLink + "'>");
        document.write(emLink);
        document.write("</a>");
    </script>
</td>

That's an improvement to the most basic level but an improvement nonetheless ;-) Lets add a bit, OK? — JPA, Jul 29 '17 at 15:18

Alberto Trindade Tavares · Accepted Answer · 2017-07-29T15:05:53.700

1

You had a typo: username instead of userName at the third line. Also you were not adding the email to the table's column. You can do this by using a span element inside the td:

        var userName = "cadler";
        var emServer = "mpl.gov";
        var emLink = userName + "@" + emServer;

        var email = document.getElementById("email");
        email.innerHTML = "<a href='mailto:" + emLink + "'>" + emLink + "</a>";

<table border="1" cellpadding="5" cellspacing="0">
            <tr>
               <th>Name</th>
               <th>Phone</th>
               <th>E-Mail</th>
            </tr>
            <tr>
               <td>Catherine Adler<br />Library Director</td>               
               <td>555-3100</td>
               <td><span id="email"></span></td>
           </tr>
 </table>

edited Jul 29 '17 at 15:05

answered Jul 29 '17 at 14:43

Alberto Trindade Tavares

10,056
5
38
46

1

yours doesn't put the link in the `td` – SuperStormer Jul 29 '17 at 14:54
@SuperStormer True. It is another problem in OP's code – Alberto Trindade Tavares Jul 29 '17 at 14:59
1

@SuperStormer Edited my answer to achieve this – Alberto Trindade Tavares Jul 29 '17 at 15:06

John Slegers · Answer 3 · 2017-07-29T15:24:55.293

1

The first problem I see, is that you first define your variable userName and later refer to it as username. You forgot to capitalize the letter n!

Fix that, and the email address will be displayed AFTER the table :

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = userName + "@" + emServer;
document.write("<a href='mailto:" + emLink + "'>");
document.write(emLink);
document.write("</a>");

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>
        <td>555-3100</td>
        <td></td>
</table>

To display it in the empty cell, you need to make a few more adjustments :

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = userName + "@" + emServer;
var email = "<a href='mailto:" + emLink + "'>" + emLink + "</a>";
document.querySelector('td:last-child').innerHTML = email;

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>
        <td>555-3100</td>
        <td></td>
</table>

document.querySelector('td:last-child') selects the last td element. Changing its innerHTML allows you to put a value in that element.

Anyway, you should never ever ever use document.write. It's been considered a bad practice for many years now. Instead, always use something like document.getElementById or document.querySelector and change the innerHTML of that element.

edited Jul 29 '17 at 15:24

answered Jul 29 '17 at 14:43

John Slegers

45,213
22
199
169

1

Really? Why not comment + flag because of typo? – Jonas Wilms Jul 29 '17 at 14:45
@Jonasw : Because I don't support the notion of closing questions for that reason, for starters! – John Slegers Jul 29 '17 at 14:46
@Jonasw : Another reason, is that fixing the typoe doesn't always the problem. This is a good example. After editing the question, I realized that I had missed an important detail : the email address was to be displayed inside the table rather than after it. I updated my answer to reflect that... which in turn illustrates why it's a bad idea to close a question during the 15 minutes because you THINK - after superficially looking at it - that it is solved by a typo ;-) – John Slegers Jul 29 '17 at 14:59
if you have a look at the question again, the js code is *inside* the td already ( originally) – Jonas Wilms Jul 29 '17 at 15:02
@Jonasw : It is obviously the OUTPUT of the JS code (the email address) that should be inside that table... – John Slegers Jul 29 '17 at 15:05
But if the document.write code is inside this td, the output will be too... – Jonas Wilms Jul 29 '17 at 15:11
@Jonasw : It wasn't in the demo provided in the question. So that's pretty much irrelevant. Also, `document.write` is something you should never do anyway... It's been considered a bad practice for many many years now! – John Slegers Jul 29 '17 at 15:13
it was until you removed it... And yes thats right but have a look at your original answer again... – Jonas Wilms Jul 29 '17 at 15:16
@Jonasw : What on earth are you talking about? The original question said `Javascript should be inserted in the empty data cell by the way.`. It was [juancab](https://stackoverflow.com/users/3768271/juancab) who replaced it with `Javascript should insert the email address in the empty table cell.`, which is OBVIOUSLY what the OP meant to say. Some people happen to be not that proficient in their use of the English language over here, so it often requires some interpretation to translate what's being said to what's being meant! Someone with a rep of 11,908 should be aware of this :-p – John Slegers Jul 29 '17 at 15:21

score 1 · Answer 4 · answered Jul 29 '17 at 14:49

there is a type in your variable name userName. You can set this value to empty cell. You have defined no id or class, selecting it will not be very clean, you can do something like this:

                    var userName = "cadler";
                    var emServer = "mpl.gov";
                    var emLink = userName + "@" + emServer;
                    document.write("<a href='mailto:" + emLink + "'>");
                    document.write(emLink);
                    document.write("</a>");
                    var table = document.getElementsByTagName('table')[0]
                    var row = table.getElementsByTagName('tr')[1]
                    row.getElementsByTagName('td')[2].innerHTML = "<a href='mailto:" + emLink + "'>" + emLink + "</a>";

<table border="1" cellpadding="5" cellspacing="0">
            <tr>
               <th>Name</th>
               <th>Phone</th>
               <th>E-Mail</th>
            </tr>

            <tr>
               <td>Catherine Adler<br />Library Director</td>               
               <td>555-3100</td>
               <td>
         
               </td>

score 1 · Answer 5 · answered Jul 29 '17 at 15:39

All of the other answers use innerHTML to insert the <a> element into the DOM. However, there are several reasons not to use it.

The following snippet provides a solution without innerHTML:

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = userName + "@" + emServer;

// create a new <a> element and set the content and href attribute
var linkElement = document.createElement("a");
linkElement.href = "mailto:" + emLink;
linkElement.textContent = emLink;

// find the element with the ID "email-cell"
var td = document.getElementById("email-cell");
td.appendChild(linkElement);

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
     <th>Name</th>
     <th>Phone</th>
     <th>E-Mail</th>
  </tr>

  <tr>
     <td>Catherine Adler<br />Library Director</td>               
     <td>555-3100</td>
     <td id="email-cell"></td> <!-- this cell will contain the link -->
  </tr>
</table>

Read about document.createElement and Node.prototype.appendChild on MDN.

How can I write an email address inside a table cell with JavaScript?

5 Answers5