I have a self-parsing HTML page that utlizes markdown-it:

<script src="/[email protected]/dist/markdown-it.min.js"></script>
<script src="markdown-it.js"></script>
<noscript>

**strong** and <mark>mark</mark>

<div style="background: #eee">

gray

</div>

</noscript>

markdown-it.js:

'use strict';

window.onload = function() {
  const markdown = document.querySelector('noscript').innerHTML;
  const md = window.markdownit({
    html: true, linkify: false, typographer: true
  });
  const html = md.render(markdown);
  document.querySelector('body').innerHTML = html;
}

It works.

Now, I want that page to show my browser and IP time zones.

<script src="/[email protected]/dist/markdown-it.min.js"></script>
<script src="markdown-it.js"></script>
<noscript>

**strong** and <mark>mark</mark>

<div style="background: #eee">

gray

</div>

</noscript>

<p id="time-zones">&ZeroWidthSpace;</p>
<script src="js/time-zones.js"></script>

time-zones.js:

'use strict';

(async () => {
  const displayEl = document.querySelector("#time-zones");
  try {
    displayEl.textContent =
      Intl.DateTimeFormat().resolvedOptions().timeZone + " — " +
      (await (await fetch(``)).json()).timezone;
  } catch ({message}) {
    displayEl.textContent = 'Error: ' + message;
  }
})();

But this doesn't work. I mean, the time-zones.js code is correct, but there is some problem that prevents it to work on a Markdown page. How this can be fixed?

update

An updated version, according to David's recommendations:

window.onload = function() {
  const markdown = document.querySelector('noscript').innerHTML;
  const md = window.document.querySelector('noscript').markdownit({
    html: true, linkify: false, typographer: true
  });
  const html = md.render(markdown);
  document.querySelector('noscript').innerHTML = html;
}

TypeError: window.document.querySelector('noscript').markdownit is not a function. (In 'window.document.querySelector('noscript').markdownit({
    html: true, linkify: false, typographer: true
  })', 'window.document.querySelector('noscript').markdownit' is undefined)

I have a self-parsing HTML page that utlizes markdown-it:

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/markdown-it.min.js"></script>
<script src="markdown-it.js"></script>
<noscript>

**strong** and <mark>mark</mark>

<div style="background: #eee">

gray

</div>

</noscript>

markdown-it.js:

'use strict';

window.onload = function() {
  const markdown = document.querySelector('noscript').innerHTML;
  const md = window.markdownit({
    html: true, linkify: false, typographer: true
  });
  const html = md.render(markdown);
  document.querySelector('body').innerHTML = html;
}

It works.

Now, I want that page to show my browser and IP time zones.

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/markdown-it.min.js"></script>
<script src="markdown-it.js"></script>
<noscript>

**strong** and <mark>mark</mark>

<div style="background: #eee">

gray

</div>

</noscript>

<p id="time-zones">&ZeroWidthSpace;</p>
<script src="js/time-zones.js"></script>

time-zones.js:

'use strict';

(async () => {
  const displayEl = document.querySelector("#time-zones");
  try {
    displayEl.textContent =
      Intl.DateTimeFormat().resolvedOptions().timeZone + " — " +
      (await (await fetch(`https://ipapi.co/json`)).json()).timezone;
  } catch ({message}) {
    displayEl.textContent = 'Error: ' + message;
  }
})();

But this doesn't work. I mean, the time-zones.js code is correct, but there is some problem that prevents it to work on a Markdown page. How this can be fixed?

update

An updated version, according to David's recommendations:

window.onload = function() {
  const markdown = document.querySelector('noscript').innerHTML;
  const md = window.document.querySelector('noscript').markdownit({
    html: true, linkify: false, typographer: true
  });
  const html = md.render(markdown);
  document.querySelector('noscript').innerHTML = html;
}

TypeError: window.document.querySelector('noscript').markdownit is not a function. (In 'window.document.querySelector('noscript').markdownit({
    html: true, linkify: false, typographer: true
  })', 'window.document.querySelector('noscript').markdownit' is undefined)

• javascript
• html

1 Answer 1

You're replacing the entire <body> element here:

document.querySelector('body').innerHTML = html;

So, depending on timing, this will do one of two things:

displayEl.textContent =
      Intl.DateTimeFormat().resolvedOptions().timeZone + " — " +
      (await (await fetch(`https://ipapi.co/json`)).json()).timezone;

Either it will produce an error because displayEl was not found, or it will successfully update displayEl which then gets immediately removed from the page by your other code.

Don't replace the entire contents of the page. Target a specific element and replace that element's contents. Similar to what you do in the second code snippet.

Edit: In your updated code you're now misusing <noscript>. You should definitely look up what it does. Basically it means "display this if the device doesn't have JavaScript functionality", which is antithetical to the fact that you're writing JavaScript functionality.

In your timezone code you are writing to a <p> element. Why don't you want to do that in both cases? Or a <div>? Or <span>? Or any number of elements which are commonly used to display content on a page.

For example, if you have this:

<div id="markdown-output"></div>

Then you can target that element:

document.querySelector('#markdown-output').innerHTML = html;