using jquery to create array of elements in a given class then selecting a random link within that class and opening it

Question

var linksInCategory = document.id($('.CategoryTreeLabel').href);
var randomLinkArray = new Array(linksInCategory);

//CategoryTreeLabel is the class all the anchor tags have that contain the href with the link to the page I want

     function goThere(link)
{
        var the_url = function pickRandomURL () {
            var random_url = randomLinkArray[Math.floor(Math.random()*randomLinkArray.length)];
            the_url = random_url;

        }
        var good_url = fixURL(the_url);
        var new_window = window.open(good_url,"new_window","menubar, resizeable. location, toolbar, status, scrollbars");
}


function fixURL(the_url) {
        var the_first_seven = the_url.substring(0,7);
        the_first_seven = the_first_seven.toLowerCase();
        if (the_first_seven != 'http://') 
        {
                the_url = "http://" + the_url;
        }
        return the_url;
}
</script>
</head>
<body>
<form name="the_form">

<input type="button" name="the_url" class="broadGroups" onClick="goThere(this)" src="the_url" value="Sports"></input>

<input type="button" name="the_url" class="broadGroups" onClick="goThere(this)"  src="the_url" value="Film"></input>

Basically I want to create an array of all the href links within the same tag as the class="CategoryTreeLabel" Then I want to create a function goThere () that will open a new window with the URL of good_url. the_url needs to be randomly selected from the list of links we grabbed from the tags with a class of "CategoryTreeLabel" in the document.

Each of the buttons should call the goThere(this) function and pick a random URL out of the array we created, check if it has http:// (it always will redirect to a page without it, but i left it in for fun), then open that page

What's the real problem with your code? Can you point out the section that doesn't work? — frm, Jan 26 '12 at 08:32
@frm i fixed up a bunch of things using the advice from nnnnnn reposted the question more clearly here http://stackoverflow.com/questions/9030770/selecting-and-opening-a-random-link-of-a-certain-class-on-an-external-webpage — Nic Meiring, Jan 27 '12 at 08:44

nnnnnn · Accepted Answer · 2012-01-26T09:04:34.810

The return from the jQuery function is an array-like object, that is to say that it has a .length property and can be accessed with array-style [] bracket notation, so you don't really need to create a separate array variable too.

I notice that your buttons seem to be for different categories of links, like sports or film, so perhaps your intention is that the "Sports" button will select a random sports-related link while the "Film" button will select a random film-related link? If so you could have each button pass the category through to your goThere() function and select a random link from within that category. Something like this:

function goThere(category)
{
    // assume that the parameter is the class name for links
    // in the desired category
    var $myLinks = $("a." + category);

    // check if there are any matching links
    if ($myLinks.length === 0) {
        alert("Sorry, no links in the " + category + " category.");
        return;
    }

    var url = fixURL($myLinks[ Math.floor(Math.random()*$myLinks.length) ].href);

    var new_window = window.open(url,"new_window",
          "menubar, resizeable. location, toolbar, status, scrollbars");
}

You'd then set up your anchor tags to have class names with appropriate categories, something like this:

<a class="sports" href="http://somesportssite.com">Super sports</a>
<a class="film"   href="http://moviesRus.com">Movies</a>
<a class="film"   href="http://animationplus.com">All about animation</a>
<a class="sports" href="http://football.com">Football site</a>
<a class="sports" href="http://skydiving.com">Let's jump!</a>

And the associated buttons would be:

<input type="button" value="Sports">
<input type="button" value="Film">

And you could set inline handlers like you had, onclick="sports", or you could do something like the following in your document.ready handler to set them all up with a single jQuery .click() call that assumes the appropriate classname/category is a lowercase version of the button label:

$('input[type="button"]').click(function() {
    goThere(this.value.toLowerCase());
});

using jquery to create array of elements in a given class then selecting a random link within that class and opening it

1 Answers1