Load typing animation on click jquery

Question

I have this simple typed.js animation that displays text, deletes it and types another string. I would like to get this animation to load when I click on a navbar link.

<div class="container blue circleBehind">
<a href="#" onclick="return show('page1','page2','page3');">TUTORIAL 1</a>
<a href="#" onclick="return show('page2','page1','page3');">TUTORIAL 2</a>
<a href="#" onclick="return show('page3','page1','page2')";>TUTORIAL 3</a>

</div>
<div class="element" id="page3" style="display:none">
</div>


document.addEventListener("DOMContentLoaded", function(){
    Typed.new(".element", {
        strings: ["first sentence", "Second sentence."],
        typeSpeed: 0
    });
});

so the first typed sentence: "first sentence" loads as soon as the page loads, I would like it to load when I click on the tutorial 3 button.

Answer 1

Something like this?

 function setString(arg){ var a=arg.innerHTML; Typed.new(".element", { strings: [a, "This is second"+a], typeSpeed: 2 }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script> <div class="container blue circleBehind"> <a href="#" onclick="setString(this);">TUTORIAL 1</a> <a href="#" onclick="setString(this);">TUTORIAL 2</a> <a href="#" onclick="setString(this);">TUTORIAL 3</a> </div> <div class="element" id="page3" > </div>