Javascript, change a link color when mouse is over it, only after I click a button

I have an assignment to do (so there is rules regarding css use and jquery etc).

edit: I need to do it entirely through javascript, I can't use css or jquery, sorry for not being more specific (although i'm sure the css and jquery answers will be useful to others!

Basically when I click a button I want my javascript to become active.

one of the features I want is that when my mouse is over a link it changes colour, and when it is no longer on the link it it goes back to the prior colour. I know how I would generally do this with "onmouseover""onmouseout". but I don't know how to do this so it only happens after I click a button

function linkA()
{
    setInterval(changeImage, 3000);
    changeLink();
}

this is some of the code that activates when the button is pressed it then activates the function change link

function changeLink()
{
    var x = document.getElementById('sidebar').getElementsByTagName('a');
    for(var i = 0; i<x.length; i++)
    {
         x[i].style.color = "blue";
    }
}

this is to change the link colours to blue, then i was thinking of using something like

`x.onmouseover = x.style.color="green";
 x.onmouseout = x.style.color='blue';`

to change the colour when i have the mouse over it, but I'm not even sure if that is valid code or if could work, any help is much appreciated!

This is the piece of html i wish to edit, there is more than three links on the rest of the page outside the div tag i just want to alter these three however

<div id="sidebar">
                <div>
                    <h3>Recent Articles</h3>
                    <ul>
                        <li>
                            <a href="article.html">Why the bird is a natural replacement for the bee</a>
                        </li>
                        <li>
                            <a href="article.html">stone work in your garden, the new trend</a>
                        </li>
                        <li>
                            <a href="article.html">Urban family turns garden into eco farm</a>
                        </li>
                        <li>
                            <a href="article.html">sheep as your lawn mower! revolutionary eco gardening</a>
                        </li>
                    </ul>
                </div>

Answers


If I understand correctly, you want the link only to change colors AFTER you press a button. To do this, you could use a boolean. Something like

var clicked = false;
var onButtonClick = function() { clicked = !clicked; }
x.onmouseover = function () {
    x.style.color = clicked ? 'green' : 'blue'
}
x.onmouseout = function () {
    x.style.color = 'blue'
}

Depending on the full problem.. You could use the button to give a new class to either, the specific / all anchors on the page OR a parent element of some kind. Then use a specific CSS selector to change the color of the links with that class.

Fiddle Here

HTML:

<button id="someButton">Text</button>

<div id="someDiv">
    <a href="#">Link</a>
    <a href="#">Link</a> 
</div>

CSS:

a:hover {
    color: green;
}

#someDiv.newClass a:hover {
    color: red;
}

jQuery:

$( document ).ready( function() {
    $( '#someButton' ).click( function() {

        if( $( '#someDiv' ).hasClass( 'newClass' ) ) {

            $( '#someDiv' ).removeClass( 'newClass' );
        }
        else {

            $( '#someDiv' ).addClass( 'newClass' );
        }
    });
});

Try x.onmouseup() . It strictly checks to see if the mouse button is lifted over an object.


You are almost correct. You need to use:

x.onmousedown = function () {
  x.style.color="green";
}
x.onmouseup = function () {
  x.style.color='blue';
}

Test it here:

var x = document.getElementById("x");

x.onmousedown = function () {
  x.style.color="green";
}
x.onmouseup = function () {
  x.style.color='blue';
}
<strong id="x">Click on me to change colour!</strong>

"Basically when I click a button I want my javascript to become active."

You can use an event listener to attach other event listeners.

HTML:

<h3>Recent Articles</h3>
  <ul>
    <li><a href="article1.html">Article 1</a></li>
    <li><a href="article2.html">Article 2</a></li>
    <li><a href="article3.html">Article 3</a></li>
  </ul>

<button id="activate">Click here to attach some event listeners.</button>     

JavaScript:

var links = document.getElementsByTagName('a'); 

var activator = document.getElementById('activate');

// Apply the hover effects...
function attachColorChangers(x) {
  x.addEventListener('mouseover', function(){
    x.style.color = 'green';
  });
  x.addEventListener('mouseout', function(){
    x.style.color = 'blue';
  });
} 

// ... after the button is clicked.
activator.addEventListener('click', function() {
  for (var i = 0; i < links.length; i += 1) {
    attachColorChangers(links[i]);
  }
});

Need Your Help

Get values from a HashTable saved in a session variable

javascript asp.net vb.net hashtable

In asp.net (vb.net) I have a Session variable that contain a HashTable

A rocket following the tracks height. Not Homing Missile

c++ physx

What I am trying to create is a rocket that will hug the track in a straight direction.