CODEWITHSUNDEEP
javascriptonmouseoveronmouseout
Epik
Epik

Reputation: 3357

JavaScript to change onmouseover or onmouseout to call a different function?

Is it possible to change a function that is called by an existing onmouseover or onmouseout event? For the following example is there a way for me to have ChangeItemAEvent change the "ItemA" onmouseover function from ChangeColor() to ChangeColorBack()? Currently I need to declare an entirely new function that I feel is not elegant because I am repeating code when I should be able to call an existing function.

javascript:

function ChangeColor(elementid)
{
  document.getElementById(elementid).style.background = "Orange";
  document.getElementById(elementid).style.color = "Black";
}

function ChangeColorBack(elementid)
{
  document.getElementById(elementid).style.background = "Black";
  document.getElementById(elementid).style.color = "White";
}

function ChangeItemAEvent()
{
  document.getElementById("ItemA").onmouseover = function() {

    document.getElementById("ItemA").style.background = "Black";
  document.getElementById("ItemA").style.color = "White";

  };
}

html:

<span id="ItemA" onmouseover="ChangeColor(this.id)">
<button id="ButtonB" onclick="ChangeItemAEvent()">

Thanks in advance

Upvotes: 0

Views: 9202

Answers (4)

munikes
munikes

Reputation: 1

This works for me:

    function overBtn(btncalling) {
            document.getElementById(btncalling).style.backgroundColor = '#507CD1';
            document.getElementById(btncalling).style.color = 'White';
    }

    function outBtn(btncalling) {
            document.getElementById(btncalling).style.backgroundColor = 'White';
            document.getElementById(btncalling).style.color = '#507CD1';
    }

Upvotes: 0

Luke Mills
Luke Mills

Reputation: 1606

Sounds like you need to do some reading on the different methods of registering events. It's important to note that there are 3 different methods for registering events in JavaScript. These are detailed at https://developer.mozilla.org/en-US/docs/DOM/event. Also note that the many different JavaScript frameworks add to this by providing their own methods for registering events in a cross-browser compatible way.

The method for setting events such as this <button id="ButtonB" onclick="ChangeItemAEvent()"> in your example is not the recommended way for setting events. Neither is setting the .onmouseover or .onclick of the element.

I would recommend reading the link regarding events at Mozilla, then if you're already using a JavaScript framework then read their documentation regarding events.

Also note there is a removeEventListener method that you may or may not find useful.

Upvotes: 0

elclanrs
elclanrs

Reputation: 94131

Attach the events in JavaScript instead of in the markup:

document.getElementById('ItemA').onmouseover = changeColorBack;

Note that capitalized function names are usually reserved for constructors as a convention.
Then on your function use this which refers to the element where is being called:

function changeColorBack() {
  this.style.background = "Black";
  this.style.color = "White";
}

Now you can use these functions on any element by just assigning a new function to the element's event or by overriding the function that was previously set.

Upvotes: 1

question
question

Reputation: 361

Another solution is to create a toggleColor(elementId) function:

function toggleColor(elementId) {
    if (this.style.color == "White") {
        this.style.background = "White";
        this.style.color = "Black";
    }else {
        this.style.background = "Black";
        this.style.color = "White";
    }
}

Upvotes: 0

Related Questions