Javascript onClick and mouseOver function

Question

I want to use onclick and mouseover in my website but when I tried onclick it won't work. I want to change the background color of my text on click but it change instantly to its previous color.

Here is my html:

<a id="a" class="a" href="bereka.html" onclick="myFunction()">HOME &nbsp;</a>

Here is my css class for a:

.a
    {
        font-size:20px;
        color:#FFF;
        text-align:center;
        text-decoration:blink;
        padding-right:20px;
   }

And below is my script with id a

function myFunction() {
    document.getElementById("a").style.backgoundcolor = "#000";
}

possible duplicate of [prevent default event in onclick](http://stackoverflow.com/questions/7056669/prevent-default-event-in-onclick) — actual_kangaroo, Mar 13 '15 at 14:07

score 1 · Answer 1 · answered Mar 13 '15 at 13:45

1

JavaScript is case-sensitive, and you've also made a typo. backgoundcolor should be backgroundColor (capital C in Color, and r in background).

answered Mar 13 '15 at 13:45

James Donnelly

126,410
34
208
218

2

It should actually be `backgroundColor` :) – Andy Mar 13 '15 at 13:46
@user3266023 it works for me. Of course it will navigate away from the page as you're not preventing it from doing so: http://stackoverflow.com/questions/10219073/html-how-to-prevent-the-browser-from-opening-the-link-specified-in-href – James Donnelly Mar 13 '15 at 13:51

score 1 · Answer 2 · answered Mar 13 '15 at 13:49

1

You have a link on the page, You click it and the page navigates away. The link background color will not be applied on the next page load.

To have a link correspond to the current page you need to add a class to the element so you can style it differently.

answered Mar 13 '15 at 13:49

epascarello

204,599
20
195
236

You need to either manually update the html of the page to have a class for the active link or write some JavaScript ti figure out the link that corresponds to the page. – epascarello Mar 13 '15 at 13:53
http://stackoverflow.com/questions/2397370/how-to-change-the-link-color-of-the-current-page-with-css – epascarello Mar 13 '15 at 13:54

score 1 · Answer 3 · answered Aug 23 '15 at 21:38

You can use CSS to handle mouseOver and visited links, which is generally cleaner than using javascript. a:visited lets you change the style of visited links, and a:hover changes the style of links when you hover over them. Here are a few links for reference:

http://www.w3schools.com/cssref/sel_hover.asp http://www.w3schools.com/cssref/sel_visited.asp

score 0 · Answer 4 · answered Mar 13 '15 at 13:55

The element you've bound your click event to is a link, by default a link will navigate to the URL specified in its href attribute, or in the absence of that, cause a page refresh.

If you want to prevent the default action, thus executing only your function, you should set preventDefault on the event object to true, like this:

function myFunction(event) {
    document.getElementById("a").style.backgoundcolor = "#000";
    event.preventDefault = true;
}

score 0 · Answer 5 · answered Mar 13 '15 at 13:59

0

Your code is a bit wrong. Typo and function. Try this:

function myFunction(e) {
    document.getElementById("a").style.backgroundcolor = "#000";
    e.preventDefault = true;
    return false;
}

answered Mar 13 '15 at 13:59

Michael Giovanni Pumo

14,338
18
91
140

score 0 · Answer 6 · answered Mar 13 '15 at 14:13

First your code is not correct. Also remove the onclick from your html and I suppose you are using jquery because you added the tag jquery so use the code below instead of onclick.

$(document).ready(function(){
    $('#yourLink').on('click', function(e){
        //your code 
        document.getElementById("a").style.backgroundcolor = "#000";
        e.preventDefault = true;
        return false;
    });
});

That should work. hope it's help!

Javascript onClick and mouseOver function

6 Answers6