Question

I have a list of values in a ul element in HTML and using javascript, I want to output in h1 a random value out of that list. I already have a script but its inputting the ID of that LI instead of the value.

Here’s my HTML:

<div id="quotes-list">
<ul>
    <li id="One">One</li>
    <li id="Two">Two</li>
    <li id="Three">Three</li>
    <li id="Four">Four</li>
    <li id="Five">Five</li>
</ul>
</div>​

<h1 id="quoted"></h1>

and here’s my javascript:

var lis = document.getElementById("quotes-list").getElementsByTagName("li");
var countThis = Math.floor(Math.random() * lis.length);

var carToon = (lis[countThis].id);

var textElement = document.getElementById("quoted");
textElement.innerHTML = carToon;

As I’ve said, this is working but it’s outputting the id of the LI.

I’ve tried playing around with the

var carToon = (lis[countThis].id);

putting lis[countThis].text but the output would be “UNDEFINED“

What could be replace on my code so that I can output in H1 a random Value out of my ul list?

Answer 1

Change this line

var carToon = (lis[countThis].id);

to

var carToon = (lis[countThis].innerHTML);