Selecting a random HTML element using JavaScript only

Question

I'm trying to select an element from my HTML code, to then use it in JavaScript (it needs to be highlighted). The HTML consists of a table with 36 td's.

My code so far:

var box;
function getRandom()
{
    return (Math.floor(Math.random()*37))
}
function highlight()
{
    box = document.getElementById(getRandom());
    box.style.backgroundColor = "yellow";
}

If anyone can give me any pointers, it'd be appreciated. I know it would be easy using jQuery, but I haven't begun learning that yet. Edit: excerpt of the HTML code, this goes up to name="36".

<table id="reflexTable">
    <tbody>
    <tr>
      <td name="1"></td>
      <td name="2"></td>
      <td name="3"></td>
      <td name="4"></td>
      <td name="5"></td>
      <td name="6"></td>
    </tr>

Well, it simply does not work. My output console states that "box" is null. Sorry, I forgot to add that. — Jens Eeckhout
– Jens Eeckhout, Commented Sep 29, 2011 at 9:58
It helps if you write HTML. There is no name attribute for <td> — Quentin
– Quentin, Commented Sep 29, 2011 at 10:10

daiscog · Accepted Answer · 2011-09-29 16:58:53Z

5

A nicer way that does not involve setting element ids:

function highlight() {

    // get all TDs that are descendants of table#reflexTable:
    var tds = document.getElementById('reflexTable').getElementsByTagName('td');

    // get a random int between 0 (inclusive) and tds.length (exclusive)
    var rand = Math.floor( Math.random() * tds.length );

    // highlight td at that index
    tds[rand].style.backgroundColor = "yellow";

}

The big advantage of this method is that you can add/remove as many TDs as you please without needing to edit your JS to generate a valid random number.

answered Sep 29, 2011 at 16:58

daiscog

12.2k8 gold badges55 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2011-09-29 10:12:18Z

3

getElementById gets the element which has the matching id. Your table data cells don't have an id at all. They have a name, but HTML doesn't allow that.

Switch to id.

HTML 4 doesn't allow an id to start with a number. Prefix the id with a common string. Then:

document.getElementById("foo" + getRandom());

answered Sep 29, 2011 at 10:12

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Jens Eeckhout Over a year ago

Thank you. Using "name" instead of "id" is probably a newbie mistake. Plus I didn't think of the fact that using a number as ID is prohibited.

Matthew Abbott · Accepted Answer · 2011-09-29 10:11:32Z

1

You're not setting the id attribute, you're setting the name attribute, change it to:

<td id="1"></td>

...etc

answered Sep 29, 2011 at 10:11

Matthew Abbott

61.7k9 gold badges108 silver badges131 bronze badges

Comments

Chad Hedgcock · Accepted Answer · 2011-09-29 10:44:00Z

0

Several things:

You should declare the box variable inside the highlight function.
You have to convert that random number to a string.
Quentin mentioned something important--you should give each table element an id of something like "s0","s1","s2", etc...
Start the naming at 0 because your getRandom function will sometimes return it.

function highlight(){ var number; number = getRandom().toString(); var box; box = document.getElementById("s" + number); box.style.backgroundColor = "yellow"; }

edited Sep 29, 2011 at 10:44

answered Sep 29, 2011 at 10:27

Chad Hedgcock

11.8k3 gold badges39 silver badges45 bronze badges

Collectives™ on Stack Overflow

Selecting a random HTML element using JavaScript only

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related