How to grab a li and append it randomly

Question

I am trying to create a website where you put your names into an input, and press "calculate" and it will take a random li with that name and append it to a box. This is my HTML:

<form class="newName">
            <label for="nameInput">Your Name</label>
            <input class="input-md" id="nameInput" placeholder="(e.g: John Smith)">
            <span class="btn-names">Enter...</span>
            <span class="calculate">Calculate</span>
        </form>
        <div class="namesEntered">
            <ul id="enteredNames"></ul>
        </div>
        <div class="centered">
            <h1>And The Winner Is....</h1><br><br>
            <span id="name" class="names">???</span>
        </div>

And my JavaScript/jQuery:

$(document).ready(function(){
    $('.btn-names').on('click', function(){
        if ($('#nameInput').val() === ''){
        alert('No names have been entered');
    } else {
        var $inputted_names = $('#nameInput').val();
        var listed = '<li>'+ $inputted_names +'</li>';
        $(listed).appendTo('ul');
        $('#nameInput').val('');
    }
    });
    $('.calculate').on('click', function(){
        var tag = document.getElementsByTagName('li');
        var name = tag.innerHTML;
        var randomator = Math.floor(Math.random(tag) * name.length);
        console.log(randomator);
    });
});

You can view this example website at http://www.b3ws.com/randomator.html But it doesn't work just yet

@Andrew It's ready :D Right now I have to code it for a keydown event, but right now it's working thanks to — Brendon Baughn, May 25 '15 at 17:13

score 1 · Accepted Answer · edited May 23 '17 at 12:14

First, get an array of li elements like

var names = $('#enteredNames li');

Then, get the random name

var randomName = names.get(Math.floor(Math.random()*names.length));

Finally, change the #name span

$('#name').text(randomName.innerHTML);

$(document).ready(function(){
    $('.btn-names').on('click', function(){
        if ($('#nameInput').val() === ''){
        alert('No names have been entered');
    } else {
        var $inputted_names = $('#nameInput').val();
        var listed = '<li>'+ $inputted_names +'</li>';
        $(listed).appendTo('ul');
        $('#nameInput').val('');
    }
    });
    $('.calculate').on('click', function(){
        var names = $('#enteredNames li');
        var randomName = names.get(Math.floor(Math.random()*names.length));
        $('#name').text(randomName.innerHTML);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label for="nameInput">Your Name</label>
            <input class="input-md" id="nameInput" placeholder="(e.g: John Smith)">
            <span class="btn-names">Enter...</span>
            <span class="calculate">Calculate</span>
        
        <div class="namesEntered">
            <ul id="enteredNames"></ul>
        </div>
        <div class="centered">
            <h1>And The Winner Is....</h1><br><br>
            <span id="name" class="names">???</span>
        </div>

Also, see Get random item from JavaScript array

score 0 · Answer 2 · answered May 25 '15 at 17:02

Replace your randomator section with this:

var randomator = Math.floor(Math.random() * tag.length); //don't need tag in random function
console.log(randomator);
$('.names').html(tag[randomator].text()); //assign the test from the random tag to the element with the names class

How to grab a li and append it randomly

2 Answers2