0

I'm trying to call a javascript function in my HTML index file and I can't get it to work. This is my html file that I'm trying to call a function from.

<div class="main">          
    <h1 class="header-main" onload="HeaderTyper('Welcome', this)">              
        <noscript>no javascript</noscript>
    </h1>
</div>
<script type="text/javascript" src="script.js"></script>

And this is the script.

function HeaderTyper(message, element){
  var i = 0;
  var speed = 50;
    if (i < message.length) {
      element.innerHTML += message.charAt(i);
    //play keystroke sound
    i++;
    setTimeout(HeaderTyper, speed);
  }
}

I'm trying to get a typewriter effect style header. I'm planning to add some keystroke sounds, but first I need to figure out how to actually type it out in the header tag. The code won't type out the message I'm passing in argument. What did I do wrong ? Thank you for any help.

RobTheRealLifeAnimoo
  • 3
  • 2

4 Answers4

0

You're attempting to bind a function call before it is loaded into the browser. Remove the onload from the HTML and add an event listener to the script.

aaronburrows
  • 994
  • 4
  • 16
0

According to this solution, The onload event can only be used on the document(body) itself. Best way to achieve this is to call the function in a <script> tag just before the </body> closing tag:

<div class="main">
  <h1 class="header-main">
    <noscript>no javascript</noscript>
  </h1>
</div>


<script>
  function HeaderTyper(message) {
    var i = 0;
    var speed = 50;
    var element = document.querySelector('.header-main');

    if (i < message.length) {
      element.innerHTML += message.charAt(i);
      //play keystroke sound
      i++;
      setTimeout(HeaderTyper, speed);
    }
  }

  HeaderTyper('Welcome');
</script>
johannchopin
  • 13,720
  • 10
  • 55
  • 101
0

After the HTML page ends (As @johannchopin explained), import the file and then add an event listener (as @aaronburrows explained).

<body>
    <div class="main">
        <h1 class="header-main">
            <noscript>no javascript</noscript>
        </h1>
    </div>
</body>

</html>
<script type="text/javascript" src="script.js"></script>
<script>
        let h1 = document.querySelector('.header-main');
            h1.addEventListener('load', HeaderTyper("Welcome", h1, false));
</script>

Also, I fixed the function, it was missing the parameters.

function HeaderTyper(message, element, i) {
    var speed = 50;
    if (i < message.length) {
        console.log(message.charAt(i))
        element.innerHTML += message.charAt(i);
        //play keystroke sound
        setTimeout(function(){ HeaderTyper(message,element,++i)}, speed);
    }
}
Franco Pan
  • 128
  • 2
  • 11
0

Ok, hi there.

function HeaderTyper(message, element){
  alert('script loaded')  //<---
  var i = 0;

I put this line at the beginning of the script to make sure it works. And it's not. Why? Because you just made your function but doesn't call it.

First way to solve this - put ur function in the "script" of HTML doc. And call it after, like

<script>
  function HeaderTyper(message) {
    let i = 0
    let speed = 50
    let element = document.querySelector('.header-main')

    if (i < message.length) {
      element.innerHTML += message.charAt(i)
      i += 1
      setTimeout(HeaderTyper, speed)
    }
  }
  HeaderTyper('Welcome')  //<---
</script>

Second way - put HeaderTyper() at the end of script.js file, so the function start, but you need to make a link for "message" and "element".

setTimeout(HeaderTyper, speed);
  }
}
HeaderTyper(someMessage, someElement)  //<---
prgv
  • 11
  • 2