1
$(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.

11
  • "display in timers" what do you mean?
    – zfrisch
    Nov 8, 2018 at 22:42
  • "What am I missing?" The rest of your code required for a Minimal, Complete, and Verifiable example.
    – Herohtar
    Nov 8, 2018 at 22:43
  • Hi Z, 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)
    – John Smith
    Nov 8, 2018 at 22:44
  • 2
    messagebox is going to try to find an element like <messagebox>, but that's not a valid tag. If you want to find an element by class you have to use .messagebox, or if you want to find an element by id you have to use #messagebox. It all depends on your html. Selectors in javascript and pretty much one for one with CSS selectors. If you know how to do CSS Selectors, you'll have some insight into what your javascript selectors should be.
    – Taplar
    Nov 8, 2018 at 22:49
  • 1
    You can have <messagebox> if you want. It's a custom html element. As long as you're registering and using it as a proper web component. Everything is ok. React and Angular do this all the time and it's still 100% valid HTML. stackoverflow.com/questions/5682943/…
    – mwilson
    Nov 8, 2018 at 23:09

2 Answers 2

0

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>

10
  • 1
    Using an id selector or class selector isn't needed. If the OP wants to have an html element called messagebox it's perfectly fine and they can use it as a selector.
    – mwilson
    Nov 8, 2018 at 23:16
  • @mwilson Agreed. The HTML structure is unclear from the OP, so I mentioned both options.
    – showdev
    Nov 8, 2018 at 23:18
  • Thank you, Showdev. I was overwhelmed with all the fixes I had to make earlier. I did a poor job demonstrating what I needed to figure out. My issue extended all the way into forgetting to use increment counters. Earlier when I tried them, I would have not done the syntax proper, so thank you for supplying me the proper way. Anyway, thank you.
    – John Smith
    Nov 9, 2018 at 0:50
  • $textBox.text(a[i++ % a.length]) - so, without " % a.length])" the function will not keep running the array over and over again. Where can I learn more about that codes purpose? to be more specific: where can I learn more about: " % "
    – John Smith
    Nov 9, 2018 at 1:05
  • Without using %, the value would just get larger and larger and soon be larger than the size of your array. (Note that there are other ways to handle it, e.g. by setting i back to zero when it reaches a.length.) For reference, see Remainder Operator and Modulo Operation. Also see What does % do in JavaScript?
    – showdev
    Nov 9, 2018 at 1:52
0

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])
    }
});
5
  • The counter goes from 0-4. But there are only four elements, so it should go from 0-3. Maybe interval < a.length-1.
    – showdev
    Nov 8, 2018 at 23:24
  • Thanks for your input. My communication was poor. I'm going to be more proper and ready next time I look for support.
    – John Smith
    Nov 9, 2018 at 0:54
  • You're fine! Please upvote or mark as answer if this helped!
    – mwilson
    Nov 9, 2018 at 2:11
  • I will! I need to reach a certain number of actions until I can contribute with upvotes.
    – John Smith
    Nov 9, 2018 at 2:26
  • HI, (a[i++ a.length]) , what role does this serve in the code?
    – John Smith
    Nov 24, 2018 at 19:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.