Why is Javascript not showing results

Question

In each html page there are an unknown number of anchors with a mailto href. Two things have to be done when loading a poage.

a) replace these mailto anchors with a script,

b) and then execute the script so the visitor can see the output of the script.

For some reason it does not work.

In the head section

<script>
var eml = {
  info: 'aW5mb0BleGFtcGxlLmNvbQ==',
  serv: 'c2VydmljZUBleGFtcGxlLmNvbQ==',
  show: function(em) {
    document.write(window.atob(em))
  }
};
</script>

In the body, this works:

<script>eml.show(eml['serv'])</script>

In the body, this doesn't work:

<a href="mailto:@serv">more information</a>

<script>
var i, href, regx, str;
var els = document.querySelectorAll('a[href*="mailto:"]');
for (i = 0; i < els.length; i++) {
  href = els[i].href;
  regx = new RegExp('^mailto:@[a-zA-Z0-9]+$');
  if (regx.test(href) && eml[href.substr(8)]) {
    str = "<script>eml.show(eml['" + href.substr(8) + "'])<\/script>";
    console.log(str);
    els[i].outerHTML = str;
  }
}
</script>

Many snippets I tried, with and without jQuery, but so far nothing works.

What is the way to do the job?

Thanx. Ronald

A script tag doesn't get executed when set as inner/outerHTML. Though [you could get it to work](https://stackoverflow.com/a/7054216/227299), [BenM's answer](https://stackoverflow.com/a/55613082/227299) provides an alternative since you don't really need to dynamically insert a script while also staying away from `document.write` which you don't seem to need. See https://www.danielcrabtree.com/blog/25/gotchas-with-dynamically-adding-script-tags-to-html — Ruan Mendes, Apr 10 '19 at 12:59
innerHTML does not execute scripts and there is no reason to do it. — epascarello, Apr 10 '19 at 13:00

score 2 · Accepted Answer · answered Apr 10 '19 at 12:52

2

You need to call the function, instead of writing to the document:

var eml = {
  info: 'aW5mb0BleGFtcGxlLmNvbQ==',
  serv: 'c2VydmljZUBleGFtcGxlLmNvbQ==',
  show: function(em) {
    document.write(window.atob(em))
  }
};

var i, href, regx, str;
var els = document.querySelectorAll('a[href*="mailto:"]');
for (i = 0; i < els.length; i++) {
  href = els[i].href;
  regx = new RegExp('^mailto:@[a-zA-Z0-9]+$');
  if (regx.test(href) && eml[href.substr(8)]) {
    eml.show(eml[ href.substr(8)]);
  }
}

<a href="mailto:@serv">more information</a>

answered Apr 10 '19 at 12:52

BenM

52,573
26
113
168

Mmm, I voted to close the question as a duplicate (and reopened it)... While technically accurate, this is probably the correct answer, because the user doesn't need to insert a script dynamically. However, you should explain why it doesn't work (setting outerHTML to a script tag doesn't execute the script), because it can work if you follow https://stackoverflow.com/a/7054216/227299 and do it before the document is closed – Ruan Mendes Apr 10 '19 at 12:53
Thanx for the code but not an answer to my question. In this case I have to replace an unknown number of mailto anchors with a script, and then execute the script. So far I understand this cannot be done with innerHTML / outerHTML. Is it possible? – bron Apr 11 '19 at 22:59

Why is Javascript not showing results

1 Answers1