Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Sven Huff
PLUS
Sven Huff
Courses Plus Student 4,355 Points
Posted by Sven Huff
Sven Huff
Courses Plus Student 4,355 Points

Displaying and erasing words.

Hi,

Intention: I want to show a static text. For example: "I am a…"

Behind the "a…" I want to display texts, which are changing. Like "sinner", "loser", "spacecowboy".

What I've done so far: I've build an array containing the words ["sinner", "loser", "spacecowboy"]. With a for loop like this:

for (i=0; i<words.length; i++)

I wanted to iterate through the array. It works. Now my screen displays:

"I am a sinner loser spacecowboy"

But that is not, what I've intended. I don't want to display the whole array, but only one word, than this word should vanish. Than the next word. Than this word should vanish… infinite.

I've visited the api.jquery. Because I want to change a DOM element. DOM because, I want to manipulate a <p> selector. The api came up with 

remove()

So I implemented it in my for-loop like this:

var caption;
var words = ['sinner', 'loser', 'spacecowboy'];
for (i=0; i<words.length; i++) {
  caption = document.write(words[i]+' ');
  $( ".rotation" ).remove( ":contains(words[i])");
}
            ```

And it does not work and I've no cue why.

Do you have any idea? Am I on the right track – is it only syntax? Or do I have to search in another section of the api to get that solved?

Best and thanks in advance,

Sven

3 Answers

Joseph Perez
Joseph Perez
25,122 Points
Joseph Perez
Joseph Perez
25,122 Points 
<p class="sentence">I am a <span class="change-word"></span></p>

var index = 0;
var wordPool = ['Smoker', 'Joker', 'Space-Cowboy'];

function init() {
    jQuery('.sentence .change-word').html(wordPool[0]);
}

function changeWord() {
    //check to see if the index needs to be reset, if not then increment the index and continue
    if(index < wordPool.length) {
        ++index;
        jQuery('.sentence .change-word').html(wordPool[index]);
    } else {
        index = 0;
        jQuery('.sentence .change-word').html(wordPool[index]);
    }
}

//set the sentence to use the first word
init();

//set the change word function to be called every second
setInterval(changeWord, 1000);

This is a quick example that I came up with. I'm sure there is a cleaner way to do it but this is the general idea I had in mind. It should be working properly but it's possible that my iterating through the array is acting a little funny.

You can go here https://jsfiddle.net/ and copy and paste the code and see a working example if you like. I hope this helps a little more :) If you have anymore questions don't hesitate to ask!

Joseph Perez
Joseph Perez
25,122 Points
Joseph Perez
Joseph Perez
25,122 Points

You should start looking at the setInterval function or the setTimeout function. You should be able to come up with a solution using either one of those. I personally would use the setInterval function. You could create a function that steps though the array of words and then use the setInterval function to call your function that steps through the array every few seconds. If you're still having trouble or can't seem to come up with a solution I can write a working example for you :)

setInterval - https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

setTimeout - https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Sven Huff
Sven Huff
Courses Plus Student 4,355 Points
Sven Huff
Sven Huff
Courses Plus Student 4,355 Points

Hi Joseph,

I've tinkered around with setInterval(). And it works:

One copy is replaced by another. But far off, from the intended behaviour. The static copy "I am" – is now replaced by the first element of the Array [wordPool], which repeats all the time. Like this: smoker smoker smoker …

I did not get it yet, how to complete the static "I am" with dynamic changes of "smoker", "joker", "spacecowboy".

I found the replace method. I guess, that this is a step to the solution too, but I am stuck. Do you have another hint, based on my following script. I would highly appreciate it.

Best and many thanks,

Sven

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS Word Changer</title>

<script>
var nIntervId;
var displayWord;
var resetWord;
var wordPool = ["Smoker", "Joker", "Space-Cowboy"];   

/*This function shows a Word for 500 milli-secs. It calls another function, which delivers the words*/

function changeWord () {
  nIntervId = setInterval(getWord, 500);
}

/*This function should show the words from the array "wordPool". It iterates through the words and replaces every single word with a blank, and then shows the next word from the array.*/

function getWord () {
 for(var i = 0; i<wordPool.length; i++) {
     var manyWords = document.write(wordPool[i]);
     var resetWord = str.replace(manyWords, " ");
 }
}
</script>
</head>

<body onload="changeWord();">
<div id="my_box">
<p>I am a</p>
</div>

</body>
</html>

            ```
Sven Huff
PLUS
Sven Huff
Courses Plus Student 4,355 Points
Sven Huff
Sven Huff
Courses Plus Student 4,355 Points

Hi Joseph, many thanks for the hint. I am going to try that out now! Best, Sven