Changing link color in javascript rather than CSS(hover) --- works in jsfiddle not browser?

Thanks for all your help guys. it works perfectly in jsfiddle/jsbin (both rollover and out), BUT I cant seem to get it to actually function in browser.

JavaScript - edited a bit from your guys help, to match how ive learned to do Math.random etc

colors = ['red','blue','green','gray','black','yellow'];
$(".test a").hover(function() {
  randomColor = Math.floor(Math.random() * colors.length - 1)
  $(this).css('color',colors[randomColor])
    }, function() {
      $(this).css('color', '#000000')
});

HTML (using different html in actuality, but this is pulled from jsbin and doesn't work)

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>  
<script type="text/javascript" src="randomcolor.js"></script>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
    <div class="test"><a href="http://test.com">WORKKKKK</a></div>
</body>
</html>

And the only difference with browser code is I have js in randomcolor.js file, called in header with

<script type="text/javascript" src="randomcolor.js"></script>

From what I've found online, this is related to "onload"? How can I implement that? I've also tried putting this script directly in the html IN the body, and I still can't get it to work.

But again, thank you guys very much for your help initially, getting it to work correctly in jsfiddle is definitely a good start!

also just to give as much info as possible -- tried adding this onload and still not working

$(window).load(function(){
    colors = ['#ffffff', 'blue', 'green', 'gray', 'black', 'yellow'];
    $(".test a").hover(function() {
        randomColor = Math.floor(Math.random() * colors.length - 1)
        $(this).css('color', colors[randomColor])
    }, function() {
        $(this).css('color', '#000000')
    }
});

Answers


You should use $("div.input") instead of $("div input") (see the dot in between)


Something like this would help

<div class="test"><a href="http://test.com">Test</a></div>

colors = ['red','blue','green','gray','black','yellow'];
$(".test a").hover(function() {
  rand = parseInt(Math.random()*10)%colors.length
  $(this).css('color',colors[rand])
});

Please check

http://jsfiddle.net/sethunath/WNGKv/


Try this http://jsfiddle.net/hdsuT/

$("div.input").hover(function() {
  $(this).find('a').addClass("blue");
}, function() {
  $(this).find('a').removeClass("blue");
});

This the way to do it

function changcolor(){
    var link=document.getElementById("iDofyourLink").style.color = "#ffffff";
}

<a href="" onmouseover="changcolor()" id="iDofyourLink"></a>

YAY. I figured it out. Hopefully nobody was working on this and I didn't waste anyones time. I'm posting it here so if anyone else has this problem in future...

I checked out the draft view to see the source of jsfiddle (should of thought of this before asking). And it was showing this as the javascript -->

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
colors = ['red', 'blue', 'green', 'gray', 'black', 'yellow'];
$(".test a").hover(function() {
    randomColor = Math.floor(Math.random() * colors.length - 1)
    $(this).css('color', colors[randomColor])
}, function() {
    $(this).css('color', '#000000')
});
});//]]>  
</script>

So I decided to leaver randomcolor as a separate file, and to get it to work I put the CDATA like so -->

<script type="text/javascript" src="randomcolor.js"><![CDATA[//]]></script>

SO....if anyone else is trying to get a code like this working (random color, link hover), here is the final code that worked for me (different than the actual document I'm using it in).

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>  
<script type="text/javascript" src="randomcolor.js"><![CDATA[//]]></script>
</head>
<body>
    <div class="test"><a href="http://test.com">Please work</a></div>
</body>
</html>

JS

$(window).load(function(){
colors = ['red', 'blue', 'green', 'gray', 'black', 'yellow'];
$(".test a").hover(function() {
    randomColor = Math.floor(Math.random() * colors.length - 1)
    $(this).css('color', colors[randomColor])
}, function() {
    $(this).css('color', '#000000')
});
});

I hope this helps someone else!


Need Your Help

How to move the mouse cursor from user code?

c++ linux input xorg

My data comes from an arduino (which gets it from a sensor).

Link and svg path releationship

javascript jquery html css

please help me, I created a custom map using svg paths. How can I create relationship between link and depanding path on the map. So when I hover the link, that path change fill color.