CODEWITHSUNDEEP
javascriptjqueryhtml
SxChoc
SxChoc

Reputation: 619

Continuously change text in an element

Hi all I have the following code :

var names = Array('John', 'Craig', 'Jim', 'Nick', 'Stuart');

$("#pickName").on('click', function () {
    //pickName();
    var name = names[Math.floor(Math.random() * names.length)];
    alert(name);
    names.splice($.inArray(name, names), 1);
    $('#' + name).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li id="John">John</li>
    <li id="Craig">Craig</li>
    <li id="Stuart">Stuart</li>
    <li id="Nick">Nick</li>
    <li id="Jim">Jim</li>
</ul>

<a id="pickName">Click Me</a>
<h1 id="randomName"></h1>

Which when I click on the #pickName selects a name from the array and displays it in a alert box then removes it from the array and from the <ul> list. Which is all fine but what I'd like to do is have the H1 tag (#randomName) looping through and 'flashing' all of the remaining names (constantly until I click #pickName).

I've tried doing an internet search for this but I can't think of how to word what it is that I'm trying to do!

Could anyone help?

Upvotes: 2

Views: 1040

Answers (2)

Dragorn421
Dragorn421

Reputation: 184

Just like jo_va but having names going through randomly:

var names = Array('John', 'Craig', 'Jim', 'Nick', 'Stuart');

function pickName()
{
    return names[Math.floor(Math.random() * names.length)]
}

$("#pickName").on('click', function () {
    //pickName();
    var name = pickName();
    alert(name);
    names.splice($.inArray(name, names), 1);
    $('#' + name).remove();
});

setInterval(function(){
    $("#randomName").text(pickName());
}, 200);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li id="John">John</li>
    <li id="Craig">Craig</li>
    <li id="Stuart">Stuart</li>
    <li id="Nick">Nick</li>
    <li id="Jim">Jim</li>
</ul>

<a id="pickName">Click Me</a>
<h1 id="randomName"></h1>

Though, I recommend you find a more sustainable way to manage your elements rather than giving the <li> ids that match their content. Unless it's really meant for static use :)

Upvotes: 1

jo_va
jo_va

Reputation: 13964

You can do it using setInterval and by keeping a global counter, also take care to take the modulo of this counter with your array length to avoid out-of-bounds indexing.

Here is the doc for setInterval. You should also assign the return value so you can later clear your interval timer.

const names = Array('John', 'Craig', 'Jim', 'Nick', 'Stuart');

const h1$ = $('#randomName');
let idx = 0;

setInterval(() => {
  h1$.text(names[idx++ % names.length]);
}, 200);

$("#pickName").on('click', function () {
    const name = names[Math.floor(Math.random() * names.length)];
    names.splice($.inArray(name, names), 1);
    $('#' + name).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li id="John">John</li>
    <li id="Craig">Craig</li>
    <li id="Stuart">Stuart</li>
    <li id="Nick">Nick</li>
    <li id="Jim">Jim</li>
</ul>

<a id="pickName">Click Me</a>
<h1 id="randomName"></h1>

Upvotes: 3

Related Questions