Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <span id="dyn_Loop_main_v1">Default TEXT 1</span><br>
    <span id="dyn_Loop_main_v2">Default TEXT 2</span>
</body>
</html>
 
var paragraphs = [
    {
        "elementId": "dyn_Loop_main_v1",
        "updateTime": 1500,
        "content": [
            "TEXT for ID_1_1",
            "TEXT for ID_1_2",
            "TEXT for ID_1_3",
            "TEXT for ID_1_4"
        ],
        "default": "Default Text 1",
        "counter": 0
    },
    {
        "elementId": "dyn_Loop_main_v2",
        "updateTime": 1000,
        "content": [
            "TEXT for ID_2_1",
            "TEXT for ID_2_2",
            "TEXT for ID_2_3",
            "TEXT for ID_2_4"
        ],
        "default": "Default Text 2",
        "counter": 0
    }
];
​
​
function updateParagraph(paragraph) {
  document.getElementById(paragraph.elementId).innerHTML = paragraph.content[paragraph.counter];
  paragraph.counter++; // set counter up
    // if we reached the end, reset to start:
  if(paragraph.counter>=paragraph.content.length) { 
    paragraph.counter = 0;
  }
}
​
paragraphs.forEach(function(paragraph) {
  console.log(paragraph); // just checking what we've got here
  setInterval(function() {
         updateParagraph(paragraph);
      },
      paragraph.updateTime
  );
});
​
// let's call that function with our first paragraph as parameter with the updateTime defined
/*
setInterval(function() {
      updateParagraph(paragraphs[0]);
   },
   paragraphs[0].updateTime);
​
// repeat for second:
setInterval(function() {
      updateParagraph(paragraphs[1]);
   },
   paragraphs[1].updateTime);
*/
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers