change different words in text with javascript

Question

I have a text and I would like to be able to create a small jquery / javascript function to change different words in this text depending on the attributes surrounding the word that I would like to change.

I have something wrong here but I can't tell what at this point. Here is what it looks like:

https://jsfiddle.net/massiace/mq0cvn25/10/

My text:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Today I feel so <span id="1" class="change" w1="sad" w2="grumpy">happy</span> but 
I don't know exactly what to <span id="2" class="change" w1="eat" w2="like" w3="feel">do</span>.

So I tried to create a each function to iterate all "change" classes and to store each words (let say I can have a max of 10 words) in the words variable. Any help would be a real blessing!!

$(document).ready(function(){
  $( ".change" ).each(function( index, obj ) {
    countId = 0;
    words = [];
    for(i=1 ; i>10 ; i++){
        if($(this).attr("w" + i)){
          words[i] = $(this).attr("w" + i);
        }
      };
    count = 0;
    setInterval(function () {
      count++;
      $(this).fadeOut(400, function () {
        $(this).text(words[count % words.length]).fadeIn(400);
      });
    }, 2000);
  });
});

https://jsfiddle.net/massiace/mq0cvn25/10/

Answer 1

You have quite a lot of typos in your code. Tidy up and keep your code clean and you will discover many problems yourself.

Read my inlined comments below.

1. Use var when you define new variables.
2. Array.push is how you add (append) new elements to an array.
3. this in JavaScript is tricky. Learn to use it correctly.

$(document).ready(function() {
  $(".change").each(function(index, obj) {
    // Cache the current element.
    var $this = $(this);

    // Use "var" to define variables.
    var words = [];
    var count = 0;
    var attr;

    // First issue: "i>10" that you have makes it an infinite loop.
    for (var i = 1; i < 10; i++) {
      attr = $this.attr("w" + i);
      if (attr) {
        // Use push to add a new element to an array.
        words.push(attr);
      } else {
        // No more attributes on this element, break the loop.
        break;
      }
    };

    setInterval(function() {
      count++;

      // The "this" keyword inside this anonymous function is not the same "this" as above.
      // Now you benefit from having the current element stored in "$this".
      $this.fadeOut(400, function() {
        $this.text(words[count % words.length]).fadeIn(400);
      });
    }, 2000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Today I feel so <span id="1" class="change" w1="sad" w2="grumpy">happy</span> but I don't know exactly what to <span id="2" class="change" w1="eat" w2="like">do</span>.