在單擊單詞一定次數后如何顯示鏈接？

Question

我是javascript的初學者。 我有一個功能，您單擊一個單詞，每次單擊第一個單詞后都會出現一系列其他單詞。 我希望顯示一個鏈接，以顯示字符串中的所有單詞（單擊該單詞正好25次）。 我似乎無法弄清楚如何在單擊單詞后顯示鏈接。

這是我的代碼。

<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>

我正在嘗試了解有關此內容的更多信息，任何建議或解釋將不勝感激！ 非常感謝。

Answer 1

好吧，我們一次都在所有初學者那里。

我重構了您的代碼，因為它無法按照編寫的方式工作。

 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>