0

I'm trying to write a script that will pick a random word from an array called words, and stop the loop after 5 times and replace the html with Amazing. so it always ends on amazing. Can't figure out best practice for something like this. My thinking is there just don't know where to put the script ender or how to properly implement this.

I feel like I need to implement something like this into my script, but can't figure out where. Please help.

if(myLoop > 15) {
    console.log(myLoop);
    $("h1").html('AMAZING.'); 
}
else {
}

Here is the Javascript that I'm using to loop and create bring new words in.

$(document).ready(function(){

    words = ['respected​', 'essential', 'tactical', 'effortless', 'credible', 'smart', 'lucid', 'engaging', 'focussed', 'effective', 'clear', 'relevant', 'strategic', 'trusted', 'compelling', 'admired', 'inspiring', 'cogent', 'impactful', 'valued']

    var timer     = 2000,
        fadeSpeed =  500;

    var count = words.length;
    var position, x, myLoop;

    $("h1").html(words[rand(count)]);

    function rand(count) {
        x = position;
        position = Math.floor(Math.random() * count);
        if (position != x) {
            return position;
        } else {
            rand(count);
        }
    }

    function newWord() {
        //clearTimeout(myLoop); //clear timer

        // get new random number
        position = rand(count);


        // change tagline
        $("h1").fadeOut(fadeSpeed, function() {
            $("h1").slideDown('slow'); $(this).html(words[position]).fadeIn(fadeSpeed);        
        });

        myLoop = setTimeout(function() {newWord()}, timer);
    }

    myLoop = setTimeout(function() {newWord()}, timer);
});

Here's my codepen

http://codepen.io/alcoven/pen/bNwewb

mbomb007
  • 3,788
  • 3
  • 39
  • 68
alcoven
  • 321
  • 2
  • 14
  • I think start by checking the previous world, and make sure they don't repeat is a start. – aahhaa Dec 23 '14 at 19:44
  • On that note, you have to check *every* previous word. Also, "focussed" should be spelled "focused." – mbomb007 Dec 23 '14 at 19:46
  • 1
    Just shuffle the array, then slice() it down to 4 elements and push "amazing" as last element in new array. Can find lots of array shuffle techniques on this site – charlietfl Dec 23 '14 at 19:48
  • @charlietfl I don't know how to implement that into my script. – alcoven Dec 23 '14 at 19:52
  • @mbomb007 haha thanks for the spell check, How would I go about doing that check? – alcoven Dec 23 '14 at 19:52
  • @wlin Not sure how to check words and make sure they don't repeat... – alcoven Dec 23 '14 at 19:52
  • Shuffle: http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript then...[SLice()](http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript) – charlietfl Dec 23 '14 at 19:53
  • It's pretty simple to check previously selected words. When the word is chosen in the `else` statement I added, remove it from the array `words'. – mbomb007 Dec 23 '14 at 20:02
  • If you are interested in performance, it's faster to remove an element from a linked list. See this link for implementing a linked list instead of an array: http://www.i-programmer.info/programming/javascript/5328-javascript-data-structures-the-linked-list.html – mbomb007 Dec 23 '14 at 20:03

2 Answers2

1

I added an iteration counter to check how many times it has changed.

Added this by other variables:

var iter = 1;

Added this in the newWord function:

iter = iter + 1;
if (iter > 5) {
  return;
}

var word;
if (iter == 5) {
  word = 'awesome';
}
else {
...

Here's my solution by changing your code:

http://codepen.io/anon/pen/YPGWYd

mbomb007
  • 3,788
  • 3
  • 39
  • 68
  • Thank you so much! does this also solve the repeating words scenario? – alcoven Dec 23 '14 at 20:00
  • 1
    No, it does not. It is left as an exercise for the reader. :) – mbomb007 Dec 23 '14 at 20:04
  • how does the reader go about doing that :] ? wouldn't I need some sort of database that tracks all words already used? – alcoven Dec 23 '14 at 20:08
  • I already commented about it below your question. If I was doing it, I would use a linked list (instead of an array), and remove the word from the list once it's been used. If I were feeling lazy, I would set the word to "" after I used it, and check if the word is "" before showing it, if so, pick a different one. But this will introduce another problem into your code where you need to subtract one from `iter` I think. Linked list is a better choice. – mbomb007 Dec 23 '14 at 21:47
  • Alternatively, try to remove it from the array. http://stackoverflow.com/questions/10024866/remove-object-from-array-using-javascript – mbomb007 Dec 23 '14 at 21:53
1

Here's a solution, which uses a for loop and a closure.

Words are removed from the array using splice. This prevents repeats.

I'm using jQuery delay in place of setTimeout:

var i, word, rnd, words, fadeSpeed, timer;

words = ['respected​', 'essential', 'tactical', 'effortless', 'credible', 'smart', 'lucid', 'engaging', 'focused', 'effective', 'clear', 'relevant', 'strategic', 'trusted', 'compelling', 'admired', 'inspiring', 'cogent', 'impactful', 'valued'];

fadeSpeed =  500;
timer = 2000;

for(i = 0 ; i < 6 ; i ++) {
  if(i===5) {
    word= 'awesome';
  }
  else {
    rnd= Math.floor(Math.random() * words.length);
    word= words[rnd];
    words.splice(rnd, 1);
  }
  
  (function(word) {
    $('h1').fadeOut(fadeSpeed, function() {
             $(this).html(word);
           })
           .slideDown('slow')
           .delay(timer)
           .fadeIn(fadeSpeed);
   }
  )(word);
}
h1 {
  text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
Community
  • 1
  • 1
Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • You Rule Dude! So concise and way less lines of code. Thanks. – alcoven Dec 23 '14 at 20:26
  • Yeah, I actually thought of this overnight, how you could use a loop rather than calling the function from within itself. It's good to see that this is pretty much would it would've become after the changes I suggested. – mbomb007 Dec 24 '14 at 14:28