Cycle through strings from an array, displaying one every second

Question

$(function() {
    let testOne = 'test one.';
    let testTwo = 'test two';

    let messageBox = $('messagebox');

    let a = ['test:', testOne,'test2:', testTwo];
    let i = 1

    setInterval(cool, 1000)

    function cool() {
        messageBox.text(a[1])
    }
});

Hi there,

I am new to JS. I am looking to have testOne and testTwo (going to add a few more) display in timers across my screen. I was given help to get this far. I am trying to, for example, have a word and its English definition appear on the screen in a time loop, rotating the words in a loop. (kind of like a live screen-saver)

What am I missing?

Thank you for your time, help, and effort.

Answer 1

You can easily swap out the messages in your array and update an html element using your code. Instead of passing a hardcoded index in, just increment a number until it reaches the length of the array (n < array.length) and reset it to 0.

I personally would recommend making your messagebox element a div or something out of the box just for readability sake (so nobody comes in and gets confused where messagebox is coming from). However, if you have a specific use case for a custom html element, make sure you're doing it correctly.

https://jsfiddle.net/mswilson4040/oxbn8t14/2/

<messagebox>Initial Value...</messagebox> // custom HTML element called messagebox


$(function() {
    let testOne = 'test one.';
    let testTwo = 'test two';
        let interval = -1;
    let messageBox = $('messagebox');

    let a = ['test:', testOne,'test2:', testTwo];
    // let i = 1 <-- this isn't doing anything

    setInterval(cool, 1000)

    function cool() {
            interval = interval < a.length ? interval += 1 : 0;
        messageBox.text(a[interval])
    }
});

Answer 2

You've got a good start.

1. As others have mentioned, unless you're using a custom HTML element (i.e. <messagebox>), use # at the beginning of your selector to indicate that "messagebox" is an ID. See jQuery's ID Selector.

   $('#messagebox')
   

   Alternatively, use a class and the class selector.

   $('.messagebox')
   

2. The index of the array element to display is currently hard-coded to 1. We want to increment it upon each iteration so the text will change. But we only want to count up to the number of array elements and then go back to the first one and start over.

   Below, I'm using JavaScript's increment and remainder operators to increment i while limiting it to the number of elements in a. Note that the "postfix" method "returns the value before incrementing", so i starts at zero.

   a[i++ % a.length]
   

Working example:

$(function() {

  let $messageBox = $('#messagebox');
  let testOne = 'test one.';
  let testTwo = 'test two.';
  let a = ['test:', testOne, 'test2:', testTwo];
  let i = 0;

  function cool() {
    $messageBox.text(a[i++ % a.length])
  }

  setInterval(cool, 1000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagebox"></div>

---

EDIT

I don't like letting i count up indefinitely. The math might get wonky after about 9 quadrillion loop iterations, which is how high JavaScript can safely count.

Safe in this context refers to the ability to represent integers exactly and to correctly compare them. For example, Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2 will evaluate to true, which is mathematically incorrect. -- developer.mozilla.org

console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MAX_SAFE_INTEGER + 1);
console.log(Number.MAX_SAFE_INTEGER + 2);
console.log(Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2);

So, here's what happens after about three million centuries:

$(function() {

  let $messageBox = $('#messagebox');
  let testOne = 'test one.';
  let testTwo = 'test two.';
  let a = ['test:', testOne, 'test2:', testTwo];
  let i = 9007199254740990;

  function cool() {
    console.log(i);
    $messageBox.text(a[i++ % a.length])
  }

  setInterval(cool, 1000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagebox"></div>

That's not good enough.
We need this thing running well past the end of time.
Let's keep it safe:

$(function() {

  let $messageBox = $('#messagebox');
  let testOne = 'test one.';
  let testTwo = 'test two.';
  let a = ['test:', testOne, 'test2:', testTwo];
  let i = 0;

  function cycleText() {
    console.log(i);
    $messageBox.text(a[i]);
    i = ++i % a.length;
    setTimeout(cycleText, 1000);
  }

  cycleText();

});

body {
  font-size: 2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagebox"></div>