How to make a link show after a certain amount of clicks on a word?

Question

I am a beginner to javascript. I have a function where you click on a word and a series of other words follows after every time you click on the first word. I would like for a link to show once all the words in the string are shown (from clicking on the word exactly 25 times). I can't seem to figure out how to get the link to show after the word is clicked.

here is my code.

<div id="container"> 
    <span onclick="bla();">click on this sentence to show the string of  words</span>
    <div id="words"></div>
</div>

<script>
    var k = 0;

    function bla() {
        var ph = ["word1", "word2", "word3", "word4", "word5","word6", 
            "word7","word8",  "word9", "word10",  
            "word11","word12","word13","14","15","16",
            "17","18","19",
            "20","21","22","23", "24","25" ];
        var container = document.getElementById('words');
        var count = container.length - 25;

        if (k < ph.length) {
            var word = document.createTextNode(ph[k] + ' ');
            container.appendChild(word);
            k++;
        }
    }

    function bla() {
        if (container.length == count) {
            con.appendChild(text1);
            $(text1).fadeIn(500);    
        } 
    }

    var text1 =document.createElement('div');
    text1.innerHTML = '<a href="nightsky.html">
        a few million years in space
        is like, how many years on earth?';

    text1.style.padding ="20px";
    text1.style.display ="none";

    container.addEventListener('click', bla);
    bla();

</script>
</body>
</html>

I'm trying to learn more about this and any advice or explanation would be very appreciated! thank you so much.

Answer 1

Well, we where all beginners at one time.

I refactored your code, since it wasn't working the way it was written.

 var e = { }; // Global variable for elements var currentWord = -1; // Global variable indicating current word. (-1 = before first word) // Global variable with words var myWords =[ "word1", "word2", "word3", "word4", "word5", "word6", "word7", "word8", "word9", "word10", "word11", "word12", "word13", "word14", "word15", "word16", "word17", "word18", "word19", "word20", "word21", "word22", "word23", "word24", "word25" ]; //function that adds the text after all words has been shown function addText() { var text1 =document.createElement('div'); var link = document.createElement('a'); link.href = 'nightsky.html'; link.textContent = 'a few million years in space is like, how many years on earth?'; text1.appendChild(link); text1.style.padding ="20px"; e.container.appendChild(text1); } function update() { // First we must add one to the currentWord variable. There are // a couple of ways to do that: // pre-increment: ++currentWord; // post-increment: currentWord++; // assignment operator: currentWord += 1; // calculate and assign : currentWord = currentWord + 1; currentWord += 1; // Check if all words has been shown if (currentWord < myWords.length) { // Show next word var word = document.createTextNode( myWords[currentWord] + ' ' ); e.words.appendChild(word); } else { // Add text // Only add the text is currentWord is identical to myWords.length if ( currentWord == myWords.length) addText(); } } function loaded() { // Get relevant elements and store them in the variable e e.container = document.getElementById('container'); e.words = document.getElementById('words'); e.hot = document.getElementById('hot'); // Add the click-handler to the hot element e.hot.addEventListener('click',update); } loaded(); // Should be called 'onload' or DOM-ready 

 <div id="container"> <span id="hot">click on this sentence to show the string of words</span> <div id="words"></div> </div>