Javascript included the word undefined as part of the outupt

Question

    var i = 0;
    var txt = 'Christmas Family Service - Sunday 19th December at 11:45 am.  Come along to Bethany Evangelical Church and find out about the real meaning of Christmas.'; /* The text */
    var speed = 50; /* The speed/duration of the effect in milliseconds */
    
    function typeWriter() {
      if (i < txt.length) {
        document.getElementById("demo").innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
      }
    }


<div class="announce">

<p id="demo">
<script>

document.write(typeWriter());
</script>

</p>

</div>

Cundefined hristmas Family Service - Sunday 19th December at 11:45 am. Come along to Bethany Evangelical Church and find out about the real meaning of Christmas.

When you do `document.write` it adds the argument to the document. In your case the result of `typeWriter()` which is `undefined` (because `typeWriter` doesn't return anything) — derpirscher, Nov 20 '21 at 19:26

CertainPerformance · Answer 1 · 2021-11-20T19:35:44.233

Your

<p id="demo">
  <script>
    document.write(typeWriter());
  </script>
</p>

inserts the return value of calling typeWriter into that #demo element - but the function does not return anything.

There's no real good reason to use document.write anyway. All you need to do is call the function, not use document.write as well.

var i = 0;
var txt = 'Christmas Family Service - Sunday 19th December at 11:45 am.  Come along to Bethany Evangelical Church and find out about the real meaning of Christmas.'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

<div class="announce">
  <p id="demo"></p>
</div>

Fixing other parts of the code:

You only need to select the element once, not every time the loop runs
.innerHTML should only be used when deliberately inserting HTML markup - with plain text, .textContent is faster, safer, and more predictable

let i = 0;
const txt = 'Christmas Family Service - Sunday 19th December at 11:45 am.  Come along to Bethany Evangelical Church and find out about the real meaning of Christmas.'; /* The text */
const speed = 50; /* The speed/duration of the effect in milliseconds */

const demo = document.getElementById("demo");
function typeWriter() {
  if (i < txt.length) {
    demo.textContent += txt[i];
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

<div class="announce">
  <p id="demo"></p>
</div>

It would also be a good idea to cache the element outside of the function, and use `textContent` instead of `innerHTML`. — Andy, Nov 20 '21 at 19:27
Thank you for the swift help with this javascript. If I cut and paste the code from the snippet I get no output on my html. I have referenced the javascript with : — Gvee, Nov 20 '21 at 19:54
@Gvee Make sure you're inserting the script *after* the `#demo` element, or use `defer` tag. If that's not the issue, check your browser console for errors (as always) — CertainPerformance, Nov 20 '21 at 20:03

Javascript included the word undefined as part of the outupt

1 Answers1