CODEWITHSUNDEEP
javascriptcssanimate.css
incognico
incognico

Reputation: 23

Replace/rotate multiple words in a sentence using scripts or CSS animation

I'm trying to replace/rotate several different words in a paragraph on my website (Wordpress). I found a script that allows me to change one set of words, but cannot figure out how to change the next set.

var words = ["one", "two", "three"];
var i = 0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
console.log(i);
return text.replace(/one/, words[i]);
}

function _changeText() {
var txt = _getChangedText();
console.log(txt);
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 3000);
<h4>Count to <span id="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

Upvotes: 2

Views: 753

Answers (3)

NoNickAvailable
NoNickAvailable

Reputation: 398

this is probably what you want. You can easily extend this code if you understand how it works. I added comments so you can understand it.

; // This is a javascript object used as a hashmap
var changeList = {
  "one": "two",
  "two": "three",
  "three": "four",
  "four": "five",
  "five": "six",
  "six": "seven",
  "seven": "eight",
  "eight": "nine",
  // ...
}

function _changeText() {
  let els = document.querySelectorAll('.word-changer');
  //iterate over all .word-changer elements
  for (let i = 0; i < els.length; i++) {
    let el = els[i];
    // read out elements data-counter and data-max attributes
    let counter = parseInt(el.dataset.counter);
    let max =  parseInt(el.dataset.max);
    
    if(counter < max ) {
      // Update counter and replace word based on the "hashmap"
        counter++;
      el.innerHTML = changeList[el.textContent]; // This is where the words get swapped
      el.dataset.counter = counter;
    }
  }
}

setInterval(_changeText, 3000);
<h4>
Count to <span class="word-changer" data-counter="0" data-max="2">one</span> and <span class="word-changer" data-counter="0" data-max="2">four</span> and <span class="word-changer" data-counter="0" data-max="2">six</span>.
</h4>

Upvotes: 1

dillon
dillon

Reputation: 733

I created a library called cycleable that handles text cycling inline. It can be used to implement what you're going for and it's fully configurable via markup.

Here's what your markup would look like

<link rel="stylesheet" href="/path/to/cycleable.css">

<h4 style="margin: 2rem;">
    Count to
    <span
        class="cycleable"
        js-items="one,two,three"
        js-timeout="3000"
    ></span>
    and
    <span
        class="cycleable"
        js-items="three,four,five"
        js-timeout="3000"
    ></span>
    and
    <span
        class="cycleable"
        js-items="five,six,seven"
        js-timeout="3000"
    ></span>.
</h4>

<script src="/path/to/cycleable.js"></script>
<script>
    _Cycleable_();
</script>

And this is the result

enter image description here

Upvotes: 0

DCR
DCR

Reputation: 15665

not clear what you are exactly looking for.

var words = ["one", "two", "three"];
var i = 0;
var cnt =0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
return  words[i];
}

function _changeText() {
var txt = _getChangedText();
//console.log(document.getElementsByClassName("changer")[cnt]);
document.getElementsByClassName("changer")[cnt].innerHTML = txt;
cnt++ ;
cnt=cnt % 2;
}

for(let i=0;i<2;i++){

setInterval("_changeText()", 3000);

}
<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

Upvotes: 1

Related Questions